O webu
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.