Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
scroll
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'évènementscroll (défilement) est émis lorsque l'on fait défiler le document ou un élément.
Informations générales
| Bouillonne | Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le document |
|---|---|
| Annulable | Non |
| Interface | UIEvent |
| Cible | DefaultView,Document,Element |
| Action par défaut | Aucune |
Note :Sur iOS UIWebViews, les évènementsscroll ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. VoirBootstrap issue #16202. Safari et WKWebViews ne sont pas affectés par ce bogue.
Propriétés
| Propriété | Type | Description |
|---|---|---|
targetLecture seule | EventTarget | La cible de l'évènement (la plus haute dans l'arbre DOM). |
typeLecture seule | DOMString | Le type d'évènement. |
bubblesLecture seule | Boolean | Si l'évènement bouillonne ou non. |
cancelableLecture seule | Boolean | Si l'évènement est annulable ou non. |
viewLecture seule | WindowProxy | Document.defaultView (objetwindow du document) |
detailLecture seule | long (float) | 0. |
Exemple
Temporisation des évènements scroll
Comme les évènementsscroll peuvent être émis à une fréquence élevée, le gestionnaire d'évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l'évènement en utilisantrequestAnimationFrame(),setTimeout() ou unCustomEvent, comme suit.
Notez, cependant, que les évènements d'interface utilisateur et les frames d'animation sont émises à peu près à la même fréquence, et ainsi l'optimisation qui suit est souvent superflue. Cet exemple optimise l'évènementscroll avecrequestAnimationFrame.
// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/var derniere_position_de_scroll_connue = 0;var ticking = false;function faireQuelqueChose(position_scroll) { // faire quelque chose avec la position du scroll}window.addEventListener("scroll", function (e) { derniere_position_de_scroll_connue = window.scrollY; if (!ticking) { window.requestAnimationFrame(function () { faireQuelqueChose(derniere_position_de_scroll_connue); ticking = false; }); } ticking = true;});Autres exemples
Pour plus d'exemples similaires, voir l'évènementresize.
Spécifications
| Specification |
|---|
| CSSOM View Module # eventdef-document-scroll |
| HTML # handler-onscroll |