Défilement de l'événement
Exemple
Exécutez un JavaScript lorsqu'un élément <div> défile :
<div onscroll="myFunction()">
Définition et utilisation
L'événement onscroll se produit lorsque la barre de défilement d'un élément défile.
Astuce : utilisez la propriété CSS overflow style pour créer une barre de défilement pour un élément.
Prise en charge du navigateur
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
Syntaxe
En HTML :
<element onscroll="myScript">
En Javascript :
object.onscroll = function(){myScript};
En JavaScript, en utilisant la méthode addEventListener() :
object.addEventListener("scroll", myScript);
Remarque : La méthode addEventListener() n'est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
Bulles: | Non |
---|---|
Annulable : | Non |
Type d'événement: | UiEvent si généré à partir d'une interface utilisateur, Event sinon |
Balises HTML compatibles : | <adresse>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > à <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
Version DOM : | Événements de niveau 2 |
Plus d'exemples
Exemple
Basculer entre les noms de classe sur différentes positions de défilement - Lorsque l'utilisateur fait défiler 50 pixels à partir du haut de la page, le nom de classe "test" sera ajouté à un élément (et supprimé lors d'un nouveau défilement vers le haut).
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 = "";
}
}
Exemple
Faites glisser un élément lorsque l'utilisateur a fait défiler 350 pixels depuis le haut de la page (ajoutez la classe slideUp) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}