scroll

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

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
# handler-onscroll

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi