Element: scroll イベント

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

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

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

例

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

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

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

// 参照: 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

Element: scroll イベント

例

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

仕様書

ブラウザーの互換性

関連情報