onscroll-Ereignis

DOM-Events Event-Objekt

Definition und Verwendung

Der onscroll-Ereignis tritt ein, wenn der Rollbalken des Elements gescrollt wird.

Hinweis:Verwenden Sie CSS overflow Stilattribute erstellen für das Element einen Rollbalken.

Beispiel

Beispiel 1

Führen Sie JavaScript aus, wenn das <div>-Element gescrollt wird:

<div onscroll="myFunction()">

Versuchen Sie es selbst

Beispiel 2

Zwischen den Klassennamen an verschiedenen Rollpositionen umschalten - Wenn der Benutzer von der Oberseite der Seite nach unten 50 Pixel rollt, wird der Klassename "test" dem Element hinzugefügt (wird beim erneuten Rollen nach oben entfernt).

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 = "";
  }
}

Versuchen Sie es selbst

Beispiel 3

Wenn der Benutzer 350 Pixel von der Oberseite der Seite nach unten scrollt, wird das Element (die slideUp-Klasse hinzufügen) eingeführt:

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

Versuchen Sie es selbst

Syntax

In HTML:

<element onscroll="myScript">

Versuchen Sie es selbst

In JavaScript:

object.onscroll = function(){myScript};

Versuchen Sie es selbst

In JavaScript wird die Methode addEventListener() verwendet:

object.addEventListener("scroll", myScript);

Versuchen Sie es selbst

Anmerkung:Internet Explorer 8 oder frühere Versionen unterstützen dies nicht addEventListener() Methode。

Technische Details

Blasen: nicht unterstützt
abbrechbar: nicht unterstützt
Eventtyp: wenn sie aus der Benutzeroberfläche generiert wird,UiEvent。Ansonsten Event。
Unterstützte HTML-Tags: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> bis <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM-Version: Level 2 Ereignisse

Browserunterstützung

Ereignisse Chrome IE Firefox Safari Opera
onscroll Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung
DOM-Events Event-Objekt