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