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.

js
// 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

Voir aussi