onscroll gebeurtenis
Voorbeeld
Voer 'n JavaScript uit wanneer 'n <div>-element gerol word:
<div onscroll="myFunction()">
Definisie en gebruik
Die onscroll-gebeurtenis vind plaas wanneer 'n element se rolbalk gerol word.
Wenk: gebruik die CSS - oorloopstyl -eienskap om 'n skuifbalk vir 'n element te skep.
Blaaierondersteuning
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
Sintaksis
In HTML:
<element onscroll="myScript">
In JavaScript:
object.onscroll = function(){myScript};
In JavaScript, gebruik die addEventListener() metode:
object.addEventListener("scroll", myScript);
Let wel: Die addEventListener() metode word nie in Internet Explorer 8 en vroeër weergawes ondersteun nie.
Tegniese besonderhede
borrels: | Geen |
---|---|
Kanselleerbaar: | Geen |
Soort gebeurtenis: | UiEvent as gegenereer vanaf 'n gebruikerskoppelvlak, Event anders |
Ondersteunde HTML-etikette: | <adres>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > na <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
DOM weergawe: | Vlak 2-geleenthede |
Meer voorbeelde
Voorbeeld
Wissel tussen klasname op verskillende rolposisies - Wanneer die gebruiker 50 pieksels vanaf die bokant van die bladsy afrol, sal die klasnaam "toets" by 'n element gevoeg word (en verwyder word wanneer dit weer opgerol word).
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
Skuif 'n element in wanneer die gebruiker 350 pieksels vanaf die bokant van die bladsy afgerol het (voeg die slideUp-klas by):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}