Exemplu
Executați un JavaScript atunci când un <div> elementul este defilat:
<div onscroll="myFunction()">
Încearcă - l singur » Definiție și utilizare
Evenimentul are loc atunci când onscroll scrollbar unui element este defilat.
Sfat: utilizați CSS overflow stil de proprietate pentru a crea o bară de derulare pentru un element.
Suport pentru browser-
Eveniment | |||||
---|---|---|---|---|---|
onscroll | da | da | da | da | da |
Sintaxă
In HTML:
< Încearcă - l singur »
În JavaScript:
object .onscroll=function(){ Încearcă - l singur »
În JavaScript, folosind addEventListener() metoda:
object .addEventListener("scroll", myScript );
Încearcă - l singur » Notă: addEventListener() , metoda nu este acceptată în Internet Explorer 8 și versiunile anterioare.
Detalii tehnice
Bule: | Nu |
---|---|
anulabil: | Nu |
Tip de eveniment: | UIEvent |
Tag-uri HTML acceptate: | <adresa>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir> <div>, <dl>, <dt>, <FIELDSET>, <form>, <h1> la <h6>, <html>, <li>, <meniu>, <object>, <ol>, <p> <pre>, <select>, <tbody>, <textarea>, <TFOOT>, <thead>, <ul> |
DOM Versiune: | Nivelul 2 Evenimente |
Mai multe exemple
Exemplu
Comutare între nume de clase pe diferite poziții de defilare - Atunci când utilizatorul derulează în jos 50 de pixeli din partea de sus a paginii, numele clasei "test" vor fi adăugate la un element (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
= "";
}
}
Încearcă - l singur » Exemplu
Slide într - un element atunci când utilizatorul a defilat în jos 350 de pixeli din partea de sus a paginii (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
Încearcă - l singur » <Eveniment obiect