Document: scroll event

scroll イベントは、ドキュメントのビューまたは要素がスクロールされたときに生じます。

scroll イベントは高い確率で生じることができるため、イベントハンドラーは DOM の変更といった計算上の処理コストの高い操作を実行すべきではありません。その代わり、次のように、 requestAnimationFrame() や、 setTimeout() 、または CustomEvent を使ってイベントを抑制することが推奨されます。

ただし、インプットイベントやアニメーションフレームは同じような確率で生じ、そのため下記のような最適化は不要の場合が多いことに注意してください。 この例では requestAnimationFrame の scroll を最適化しています。

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // Do something with the scroll position
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

その他の類似の例を見るには、 resize イベントページをご覧ください。

• Element: scroll event