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

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

• GlobalEventHandlers.onscroll