Element: scroll イベント

scroll イベントは、要素がスクロールしたときに発行されます。

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

注: iOS の UIWebViews では、 scroll イベントはスクロールしている最中には発行されません。スクロールが完了した後に発行されます。 Bootstrap issue #16202 を参照してください。 Safari と WKWebViews はこのバグの影響を受けません。

スクロールイベントの間引き

scroll イベントは高い頻度で発行されるため、イベントハンドラーで DOM の変更のような計算が重い操作を実行するべきではありません。代わりに、次のように requestAnimationFrame(), setTimeout(), CustomEvent などを使用してイベントを間引くことをお勧めします。

なお、ただし、 input イベントやアニメーションフレームがおよそ同じ頻度で発行されるため、以下の最適化は必要ないことがあります。この例は requestAnimationFramescroll イベントを最適化します。

// 参照: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // スクロール位置で何かをする
}

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

関連情報

  • Document: scroll イベント