Jak zakázat scrollování na stránce
Někdy se hodí zamezit uživateli v rolování, jaké existují možnosti?
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.
- Jedna možnost je prohazovat třídu, která
overflow: hiddenzajistí, - druhá měnit skriptem přímo
document.documentElement.style.overflownahidden/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:
- 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ě),
- změřit JavaScriptem šíři scrollbaru a stránku odšťouchnout — existuje hotové řešení od pana Chamurappiho,
- neřešit to — při překrytí černým pozadím si toho člověk stejně nejspíš nevšimne.
Komentáře