scroll
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 Standard # handler-onscroll |
Compatibilité des navigateurs
BCD tables only load in the browser