Zakázat rolování stránky

Upozornění: Bránit a pozměňovat výchozí běžné uživatelské akce je vhodné jen výjimečně a v odůvodnitelných případech.

U různých lightbox skriptů se takové chování může hodit — originální podklad (stránka) je překrytý a rolování jeho obsahu by každého akorát otravovalo.

Dialog

Vyskakovací dialog, než se zavře, nelze se stránkou rolovat.

Řešení

Leckoho by možná nepadlo bránit rolování stornováním všech možných událostí jako je

  • rolování kolečkem (onmousewheel),
  • mačkání kláves a (onkeypress)
  • a podobně.

Leč elegantnější řešení a funkčnější mi přijde pro <html> nastavit overflow: hidden, čímž se možnost posouvání stránky dokonale zablokuje.

  1. Jedna možnost je prohazovat třídu, která overflow: hidden zajistí,
  2. druhá měnit skriptem přímo document.documentElement.style.overflow na hidden/visible.

Drobná nevýhoda overflow: hidden řešení je, že zároveň zmizí posuvník, což vytvoří lehké poskočení stránky. Řešení je:

  1. vycházet z toho, že posuvník má většinou cca 16 pixelů (v reálu tak většině uživatelům stránka poskočí maximálně nějak nepatrně),
  2. změřit JavaScriptem šíři scrollbaru a stránku odšťouchnout — existuje hotové řešení od pana Chamurappiho,
  3. neřešit to — při překrytí černým pozadím si toho člověk stejně nejspíš nevšimne.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Odrolování na element

Odrolování na určitý HTML tag

Nestačí-li běžné odrolování na HTML #kotvu, přichází na řadu JavaScript.

Zvýraznění podle rolování

Označení odkazu na kotvu, pokud je na ní odrolováno

U jednostránkových webů s fixní navigací (s odkazy na #kotvy) může být vhodné právě viditelnou (aktivní) položku zvýraznit.

Změna location.hash bez odrolování stránky

Změna location.hash bez posunu stránky

Jak změnit location.hash bez posunutí stránky.

Odkaz na kotvu a fixní menu

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

Komentáře