MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

L'évènement  Scroll (défilement) est déclenché lorsque l'on fait défiler le document ou un élément.

Informations générales

Spécification
DOM L3, CSSOM View
Interface
UIEvent
Bubbles
Not on elements, but bubbles to the default view when fired on the document
Annulable
Non
Cible
defaultView, Document, Element
Action par défaut
Aucune

Propriétés

Propriété 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

Depuis que les évènements liés au Scroll peuvent être déclenchés à une fréquence élevée, le gestionnaire d'évènements ne devrait pas exécuter des opérations coûteuses en terme de puissance de calcul comme la modifivcation du DOM. À la place, il est recommandé d'accélérer l'évènement en utilisant requestAnimationFrame, setTimeout ou customEvent, comme suit:

Optimisation du 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;
});

 

Plus d'exemples similaires avec l'évènement resize.

Compatibilité Navigateurs

iOS UIWebView

Sur iOS UIWebViews, les évènements liés au scroll ne sont pas déclenchés pendant le scroll mais plutôt une fois que le scroll prend fin. 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 : timkrief, florentDieg
 Dernière mise à jour par : timkrief,