Przykład
Wykonać JavaScript kiedy <div> Element jest przewijane:
<div onscroll="myFunction()"> Spróbuj sam " Definicja i Wykorzystanie
Onscroll zdarzenie podczas przewijania elementem jest jest przewijane.
Wskazówka: użyj CSS przepełnienie właściwość stylu, aby utworzyć pasek przewijania dla elementu.
Wsparcie przeglądarka
| Zdarzenie | |||||
|---|---|---|---|---|---|
| onscroll | tak | tak | tak | tak | tak |
Składnia
W HTML:
W JavaScript:
object .onscroll=function(){ Spróbuj sam " W JavaScript, używając addEventListener() metodę:
object .addEventListener("scroll", myScript );
Spróbuj sam " Uwaga: addEventListener() metoda ta nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
| bubbles: | Nie |
|---|---|
| opłata: | Nie |
| Typ wydarzenia: | UIEvent |
| Obsługiwane znaczniki HTML: | <adres> <blockquote> <ciało> <podpis> <centrum>, <dd> <dir> <dz> <dl> <dt> <fieldset> <form>, <h1> do <H6> <html> <li> <menu> <obiekt>, <ol> <s>, <przed> <wybrać>, <tbody>, <textarea> <TFOOT>, <THEAD>, <ul> |
| DOM wersja: | Poziom 2 Wydarzenia |
Więcej przykładów
Przykład
Przełączanie między nazwami klas na różnych stanowiskach scroll - Gdy użytkownik przewija w dół 50 pikseli od górnej części strony, nazwa klasy "test" zostaną dodane do elementu (and removed when scrolled up again) .
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
= "";
}
}
Spróbuj sam " Przykład
Przesuń w elemencie, gdy użytkownik przewija w dół 350 pikseli od górnej części strony (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
Spróbuj sam " <Object Event