Posouvání

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 .