Zjištění směru rolování
Jak JavaScriptem zjistit, jakým směrem uživatel na stránce roluje.
Událost onscroll
JS událost, která se provede při každém posunu po stránce, se jmenuje onscroll.
window.onscroll = function () {
// kód se vykoná při rolování
}Vlastnosti scrollTop a scrollLeft
Údaje o odrolování jsou ve vlastnostech:
scrollTop– odrolováno shorascrollLeft– zleva
Pokud nás zajímá rolování vrámci celé stránky, budeme zjišťovat scrollTop a scrollLeft u elementu <body>.
var zleva = document.documentElement.scrollLeft + document.body.scrollLeft;
var shora = document.documentElement.scrollTop + document.body.scrollTop;Proč se pro spočítání scrollX sčítá document.body s document.documentElement? Je to kvůli Chrome, kde je potřebná hodnota v document.body.scrollX, zatímco v ostatních prohlížečích v document.documentElement.scrollX.
Určení směru
Směr rolování určíme na základě změny hodnot zleva a shora při porovnávání s předchozím rolováním.
- V případě, že se nerovná minulá a současná vodorovná (
scrollLeft) posice => roluje se do strany. - V případě, že se nerovná minulá a současná svislá (
scrollTop) posice => roluje se svisle.
Porovnáním větší/menší potom zjistíme i směr.
Živá ukázka (při rolování se vypíše směr)
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.