Evento a scorrimento
Esempio
Esegui un JavaScript durante lo scorrimento di un elemento <div>:
<div onscroll="myFunction()">
Definizione e utilizzo
L'evento onscroll si verifica durante lo scorrimento della barra di scorrimento di un elemento.
Suggerimento: usa la proprietà dello stile di overflow CSS per creare una barra di scorrimento per un elemento.
Supporto browser
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
Sintassi
In HTML:
<element onscroll="myScript">
In JavaScript:
object.onscroll = function(){myScript};
In JavaScript, utilizzando il metodo addEventListener():
object.addEventListener("scroll", myScript);
Nota: il metodo addEventListener() non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
| Bolle: | No |
|---|---|
| Annullabile: | No |
| Tipo di evento: | UiEvent se generato da un'interfaccia utente, Event in caso contrario |
| Tag HTML supportati: | <indirizzo>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > a <h6>, <html>, <li>, <menu>, <oggetto>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <testa>, <ul> |
| Versione DOM: | Eventi di livello 2 |
Altri esempi
Esempio
Passa da un nome di classe all'altro su diverse posizioni di scorrimento - Quando l'utente scorre di 50 pixel dalla parte superiore della pagina, il nome della classe "test" verrà aggiunto a un elemento (e rimosso quando si scorre nuovamente verso l'alto).
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 = "";
}
}
Esempio
Far scorrere un elemento quando l'utente ha eseguito uno scorrimento verso il basso di 350 pixel dalla parte superiore della pagina (aggiungi la classe slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}