scroll
událost umožňuje reagovat na rolování stránky nebo prvku. Zde můžeme udělat několik dobrých věcí.
Například:
- Zobrazit/skrýt další ovládací prvky nebo informace v závislosti na tom, kde v dokumentu se uživatel nachází.
- Načíst více dat, když uživatel posune stránku dolů až na konec.
Zde je malá funkce pro zobrazení aktuálního posouvání:
window.addEventListener('scroll', function() {
document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
});
V akci:
Aktuální posun =posouvání okna
scroll
událost funguje jak na window
a na rolovacích prvcích.
Zabránit posouvání
Jak uděláme, aby se něco nedalo rolovat?
Nemůžeme zabránit posouvání pomocí event.preventDefault()
v onscroll
posluchače, protože se spouští po svitek již proběhl.
Posouvání však můžeme zabránit event.preventDefault()
u události, která způsobí posun, například keydown
událost pro pageUp a pageDown .
Pokud k těmto událostem přidáme obsluhu události a event.preventDefault()
v něm, pak se posouvání nespustí.
Existuje mnoho způsobů, jak zahájit posouvání, takže je spolehlivější použít CSS, overflow
vlastnost.
Zde je několik úloh, které můžete vyřešit nebo si prohlédnout aplikace onscroll
.