We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

L’évènement scroll (défilement) est émis lorsque l’on fait défiler le document ou un élément.

Informations générales

Spécification
DOM L3, CSSOM View
Interface
UIEvent
Bouillonnement
Pas sur les éléments, mais bouillonne vers la defaultView quand émis sur le document
Annulable
Non
Cible
defaultView, Document, Element
Action par défaut
Aucune

Propriétés

Property Type Description
target Lecture seule EventTarget The event target (the topmost target in the DOM tree).
type Lecture seule DOMString The type of event.
bubbles Lecture seule Boolean Whether the event normally bubbles or not.
cancelable Lecture seule Boolean Whether the event is cancellable or not.
view Lecture seule WindowProxy document.defaultView (window of the document)
detail Lecture seule long (float) 0.

Exemple

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 customEvent, comme suit :

Optimisation de scroll avec window.requestAnimationFrame

// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/

var derniere_position_de_scroll_connue = 0;
var ticking = false;

function faitQuelquechose(position_scroll) {
  // faites quelque chose avec la position du scroll
}

window.addEventListener('scroll', function(e) {
  derniere_position_de_scroll_connue = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      faitQuelquechose(derniere_position_de_scroll_connue);
      ticking = false;
    });
  }
  ticking = true;
});

Pour plus d’exemples similaires, voir l’évènement resize.

Compatibilité des navigateurs

iOS UIWebView

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 bug.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : fscholz, Watilin, timkrief, florentDieg
Dernière mise à jour par : fscholz,