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ènement scroll (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ènements scroll ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir Bootstrap issue #16202. Safari et WKWebViews ne sont pas affectés par ce bogue.
Propriétés
| Propriété | Type | Description |
|---|---|---|
target Lecture seule |
EventTarget |
La cible de l'évènement (la plus haute dans l'arbre DOM). |
type Lecture seule |
DOMString |
Le type d'évènement. |
bubbles Lecture seule |
Boolean |
Si l'évènement bouillonne ou non. |
cancelable Lecture seule |
Boolean |
Si l'évènement est annulable ou non. |
view Lecture seule |
WindowProxy |
Document.defaultView (objet window du document) |
detail Lecture seule |
long (float) |
0. |
Exemple
Temporisation des évènements scroll
Comme les évènements scroll 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 utilisant requestAnimationFrame(), setTimeout() ou un CustomEvent, 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ènement scroll avec requestAnimationFrame.
// 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ènement resize.
Spécifications
| Specification |
|---|
| CSSOM View Module # eventdef-document-scroll |
| HTML # handler-onscroll |
Compatibilité des navigateurs
Chargement…