Beispiel
Führen Sie einen JavaScript , wenn ein <div> Element gescrollt wird:
<div onscroll="myFunction()"> Versuch es selber " Definition und Verwendung
Das onscroll Ereignis auftritt, wenn ein Scrollbar des Elements wird gescrollt wird.
Tipp: Verwenden Sie die CSS - Überlauf - Stil Eigenschaft eine Scrollbar für ein Element zu erstellen.
Browser-Unterstützung
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Ja | Ja | Ja | Ja | Ja |
Syntax
In HTML:
In JavaScript:
object .onscroll=function(){ Versuch es selber " In JavaScript mit den addEventListener() Methode:
object .addEventListener("scroll", myScript );
Versuch es selber " Hinweis: Die addEventListener() Methode wird nicht unterstützt in Internet Explorer 8 und früheren Versionen.
Technische Details
| Blasen: | Nein |
|---|---|
| Es fällt eine Pauschale: | Nein |
| Event-Typ: | UIEvent |
| Unterstützte HTML-Tags: | <Adresse>, <blockquote>, <body>, <caption>, <center> <dd>, <Verzeichnis>, <div>, <dl> <dt>, <fieldset>, <form>, <h1> bis <h6>, <html>, <li>, <Menü>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
| DOM Version: | Level 2 Veranstaltungen |
Mehr Beispiele
Beispiel
Umschalten zwischen den Klassennamen auf verschiedene Bildlaufpositionen - Wenn du den Benutzer nach unten scrollt 50 Pixel von oben auf der Seite, der Klassenname "test" wird an ein Element hinzugefügt werden (and removed when scrolled up again) werden, (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
= "";
}
}
Versuch es selber " Beispiel
Schieben Sie in einem Element , wenn der Benutzer 350 Pixel vom oberen Rand der Seite nach unten gescrollt hat (add the slideUp class) Sie (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
Versuch es selber " <Ereignisobjekt