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.
Související články
JavaScript null a undefined
Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.
Sleep v JavaScriptu
Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await
JavaScript Battery API
Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.