Wydarzenie onscrollowe
Przykład
Wykonaj JavaScript, gdy element <div> jest przewijany:
<div onscroll="myFunction()">
Definicja i użycie
Zdarzenie onscroll występuje, gdy pasek przewijania elementu jest przewijany.
Wskazówka: użyj właściwości stylu CSS overflow , aby utworzyć pasek przewijania dla elementu.
Obsługa przeglądarki
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
Składnia
W HTML:
<element onscroll="myScript">
W JavaScript:
object.onscroll = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("scroll", myScript);
Uwaga: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
| Bąbelki: | Nie |
|---|---|
| Możliwość anulowania: | Nie |
| Typ wydarzenia: | UiEvent , jeśli jest generowany z interfejsu użytkownika, w przeciwnym razie Event |
| Obsługiwane tagi HTML: | <adres>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <formularz>, <h1 > na <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <głowa>, <ul> |
| Wersja DOM: | Wydarzenia poziomu 2 |
Więcej przykładów
Przykład
Przełączaj między nazwami klas w różnych pozycjach przewijania — gdy użytkownik przewinie w dół 50 pikseli od góry strony, nazwa klasy „test” zostanie dodana do elementu (i usunięta po ponownym przewinięciu w górę).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Przykład
Wsuń element, gdy użytkownik przewinął w dół 350 pikseli od góry strony (dodaj klasę slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}