Exemple
Exécuter un script JavaScript quand un <div> est défilée élément:
<div onscroll="myFunction()"> Essayez vous - même » Définition et utilisation
L'événement se produit lorsque onscroll est défilée la barre de défilement d'un élément.
Astuce: utilisez le CSS overflow propriété de style pour créer une barre de défilement pour un élément.
Support du navigateur
| un événement | |||||
|---|---|---|---|---|---|
| onscroll | Oui | Oui | Oui | Oui | Oui |
Syntaxe
En HTML:
< Essayez vous - même » JavaScript:
object .onscroll=function(){ Essayez vous - même » En JavaScript, en utilisant la addEventListener() méthode:
object .addEventListener("scroll", myScript );
Essayez vous - même » Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
| Bulles: | Non |
|---|---|
| cancelable: | Non |
| Type d'événement: | UIEvent |
| Pris en charge les balises HTML: | <adresse>, <blockquote>, <body>, <caption>, <center>, <jj>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> à <h6>, <html> <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
| DOM Version: | Niveau 2 Événements |
autres exemples
Exemple
Bascule entre les noms de classe sur différentes positions de défilement - Lorsque l'utilisateur fait défiler vers le bas de 50 pixels à partir du haut de la page, le nom de la classe "test" seront ajoutés à un élément (and removed when scrolled up again) à (and removed when scrolled up again) le (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
= "";
}
}
Essayez vous - même » Exemple
Coulisser dans un élément lorsque l'utilisateur a fait défiler vers le bas 350 pixels à partir du haut de la page (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
Essayez vous - même » <Object Event