onsscroll- evenement
Voorbeeld
Voer een JavaScript uit wanneer een <div>-element wordt gescrolld:
<div onscroll="myFunction()">
Definitie en gebruik
De gebeurtenis onscroll vindt plaats wanneer de schuifbalk van een element wordt gescrolld.
Tip: gebruik de CSS - overloopstijleigenschap om een schuifbalk voor een element te maken.
Browserondersteuning
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
Syntaxis
In HTML:
<element onscroll="myScript">
In javascript:
object.onscroll = function(){myScript};
In JavaScript, met behulp van de addEventListener()-methode:
object.addEventListener("scroll", myScript);
Opmerking: de methode addEventListener() wordt niet ondersteund in Internet Explorer 8 en eerdere versies.
Technische details
| bubbels: | Nee |
|---|---|
| Annuleerbaar: | Nee |
| Evenementtype: | UiEvent indien gegenereerd vanuit een gebruikersinterface, anders Event |
| Ondersteunde HTML-tags: | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > naar <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
| DOM-versie: | Niveau 2 Evenementen |
Meer voorbeelden
Voorbeeld
Wissel tussen klassenamen op verschillende scrollposities - Wanneer de gebruiker 50 pixels vanaf de bovenkant van de pagina naar beneden scrolt, wordt de klassenaam "test" toegevoegd aan een element (en verwijderd wanneer hij weer omhoog scrolt).
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 = "";
}
}
Voorbeeld
Schuif een element in wanneer de gebruiker 350 pixels naar beneden heeft gescrolld vanaf de bovenkant van de pagina (voeg de slideUp-klasse toe):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}