Esempio
Esegui un JavaScript quando un <div> elemento viene fatto scorrere:
<div onscroll="myFunction()"> Prova tu stesso " Definizione e l'utilizzo
L'evento si verifica quando onscroll barra di scorrimento di un elemento viene fatto scorrere.
Suggerimento: utilizzare il CSS di overflow proprietà di stile per creare una barra di scorrimento per un elemento.
Supporto browser
| Evento | |||||
|---|---|---|---|---|---|
| onscroll | sì | sì | sì | sì | sì |
Sintassi
In HTML:
In JavaScript:
object .onscroll=function(){ Prova tu stesso " In JavaScript, utilizzando il addEventListener() Metodo:
object .addEventListener("scroll", myScript );
Prova tu stesso " Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
| bolle: | No |
|---|---|
| cancelable: | No |
| Tipo di evento: | UIEvent |
| tag HTML supportati: | <indirizzo>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> a <h6>, <html>, <li>, <Menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <TFOOT>, <thead>, <ul> |
| DOM Versione: | Livello 2 Eventi |
Altri esempi
Esempio
Alterna tra i nomi delle classi in diverse posizioni di scorrimento - Quando l'utente scorre verso il basso 50 pixel dalla parte superiore della pagina, il nome della classe "test" verranno aggiunti ad un elemento (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
= "";
}
}
Prova tu stesso " Esempio
Far scorrere in un elemento quando l'utente ha fatto scorrere verso il basso 350 pixel dalla parte superiore della pagina (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
Prova tu stesso " <Oggetto evento