スクロールを操作する方法、スクロールイベントに反応する方法、およびそれらを調整する方法を発見する
ページをスクロールしてスクロールしなければ見えない位置にあるコンテンツを表示することは、クリックやキーボードイベントよりも、おそらくページで発生する最も一般的なイベントです。
あなたは聞くことができますscroll
のイベントwindow
ユーザーがページをスクロールするたびに情報を取得するオブジェクト:
window.addEventListener('scroll', event => {
// scroll event detected
})
イベントハンドラー内で、現在の垂直スクロール位置を確認するには、window
プロパティwindow.scrollY
、およびを使用した水平スコーリングwindow.scrollX
。
window.addEventListener('scroll', event => {
console.log(window.scrollY)
console.log(window.scrollX)
})
それを念頭に置いてscroll
イベントは一度限りのものではありません。
スクロールの終了時や開始時だけでなく、スクロール中に何度も発生するため、何らかの操作が必要な場合に問題が発生します。
ハンドラーイベントハンドラーで直接計算や操作を行うべきではありませんが、使用する必要がありますスロットル代わりに。
スロットル
ザ・scroll
イベントはイベントごとに1回発生するのではなく、アクションの全期間中、イベントハンドラー関数を継続的に呼び出します。
これは、何が起こっているかを追跡できるように座標を提供するためです。
イベントハンドラーで複雑な操作を実行すると、パフォーマンスに影響を与え、サイトユーザーのエクスペリエンスが低下します。
のようなスロットルを提供するライブラリLodash考えられるすべてのユースケースを処理するために、100行以上のコードで実装します。シンプルで理解しやすい実装はこれです。setTimeout100ミリ秒ごとにスクロールイベントをキャッシュするには:
let cached = null
window.addEventListener('scroll', event => {
if (!cached) {
setTimeout(() => {
//you can access the original event at `cached`
cached = null
}, 100)
}
cached = event
})
スロットルは、
mousemove
マウスイベントのレッスンで見たイベント。同じことです。マウスを動かすと、そのイベントが複数回発生します。
Codepenの例を次に示します。
ペンを見るスクロールイベントフラビオ・コープス(@flaviocopes) オンCodePen。
Tech Wiki Online!