onscroll- Ereignis
Beispiel
Führen Sie ein JavaScript aus, wenn ein <div>-Element gescrollt wird:
<div onscroll="myFunction()">
Definition und Verwendung
Das onscroll-Ereignis tritt auf, wenn die Bildlaufleiste eines Elements gescrollt wird.
Tipp: Verwenden Sie die CSS -Eigenschaft overflow style, um eine Bildlaufleiste für ein Element zu erstellen.
Browser-Unterstützung
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
Syntax
Im HTML-Format:
<element onscroll="myScript">
In JavaScript:
object.onscroll = function(){myScript};
Verwenden Sie in JavaScript die Methode addEventListener():
object.addEventListener("scroll", myScript);
Hinweis: Die Methode addEventListener() wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.
Technische Details
Bläschen: | Nein |
---|---|
kündbar: | Nein |
Ereignistyp: | UiEvent , wenn es von einer Benutzeroberfläche generiert wird, andernfalls 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: | Ereignisse der Ebene 2 |
Mehr Beispiele
Beispiel
Umschalten zwischen Klassennamen an verschiedenen Bildlaufpositionen – Wenn der Benutzer 50 Pixel vom oberen Rand der Seite nach unten scrollt, wird der Klassenname „test“ zu einem Element hinzugefügt (und entfernt, wenn er wieder nach oben gescrollt wird).
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 = "";
}
}
Beispiel
Schieben Sie ein Element ein, wenn der Benutzer vom oberen Rand der Seite 350 Pixel nach unten gescrollt hat (fügen Sie die Klasse slideUp hinzu):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}