Document: scroll event

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

バブリング はい
キャンセル可能 いいえ
インターフェイス Event
イベントハンドラープロパティ onscroll

注: iOS UIWebViews では、スクロールされている最中は scroll イベントは生じません。スクロールが完了したあとにのみ生じます。 詳しくは Bootstrap issue #16202 をご覧ください。 Safari と WKWebViews ではこのバグは起きません。

スクロールイベントを抑制する

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 イベントページをご覧ください。

仕様

仕様書 策定状況
CSS Object Model (CSSOM) View Module 草案

ブラウザー実装状況

BCD tables only load in the browser

関連情報