Webページのスクロールを操作する方法

スクロールを操作する方法、スクロールイベントに反応する方法、およびそれらを調整する方法を発見する

ページをスクロールしてスクロールしなければ見えない位置にあるコンテンツを表示することは、クリックやキーボードイベントよりも、おそらくページで発生する最も一般的なイベントです。

あなたは聞くことができます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!