Element: scroll イベント
scroll
イベントは、要素がスクロールしたときに発行されます。
注: 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
関連情報
- Document:
scroll
イベント