Zdarzenie onscroll

Zdarzenia DOM Obiekt Event

Definicja i użycie

Zdarzenie onscroll występuje, gdy paski przewijania elementu są przewijane.

Wskazówka:Użyj CSS overflow Atrybuty stylu tworzą paski przewijania dla elementu.

Przykład

Przykład 1

Wykonaj JavaScript, gdy przewijasz element <div>:

<div onscroll="myFunction()">

Spróbuj sam

Przykład 2

Przełączanie między nazwami klas w różnych pozycjach przewijania - gdy użytkownik przewija stronę od góry w dół o 50 pikseli, nazwa klasy "test" zostanie dodana do elementu (po ponownym przewinięciu w górę zostanie usunięta).

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

Spróbuj sam

Przykład 3

Gdy użytkownik przewija stronę w dół o 350 pikseli, w滑入 element (dodaj klasę slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

Spróbuj sam

Gramatyka

W HTML:

<element onscroll="myScript">

Spróbuj sam

W JavaScript:

object.onscroll = function(){myScript};

Spróbuj sam

W JavaScript, używając metody addEventListener():

object.addEventListener("scroll", myScript);

Spróbuj sam

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują Metoda addEventListener()。

Szczegóły techniczne

Bąbelkowanie: Nieobsługiwane
Można anulować: Nieobsługiwane
Typ eventu: jeśli wygenerowany z interfejsu użytkownika:UiEvent。W przeciwnym razie Event。
Obsługiwane znaczniki HTML: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> do <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
Wersja DOM: Zdarzenia poziomu 2

Obsługa przeglądarek

Zdarzenia Chrome IE Firefox Safari Opera
onscroll Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie
Zdarzenia DOM Obiekt Event