Scrollend（新しい JavaScript イベント）

タイムアウト関数を削除し、バグを取り除きます。本当に必要なイベントは、scrollend です。

Adam Argyle

scrollend イベントが発生する前は、スクロールを検出する信頼できる手段がなかった 確認します。つまり、イベントの発生が遅くなったり、ユーザーが指を置いて 画面下に残っていましたこれは、スクロールがいつ終了したかを ユーザーエクスペリエンスに 悪影響を及ぼしていました

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

この setTimeout() 戦略でできることは、スクロールが停止しているかどうかを確認することです。 100ms。これにより、スクロールが一時停止したイベントではなく、スクロールが一時停止したように見えます。 終了です。

scrollend この難しい評価はすべてブラウザが代行します。

document.onscrollend = event => {…}

そういうものだよね。完璧なタイミングと有意義な条件満載 出力されます。

試してみる

イベントの詳細

scrollend イベントは、次の場合に発生します。 - ブラウザでスクロールのアニメーションや翻訳が行われなくなる。 - ユーザーのタップ操作が解除されました。 - ユーザーのポインタによってスクロールつまみが離された。 - ユーザーのキー操作が解除されました。 - 「フラグメントまでスクロール」完了。 - スクロールのスナップが完了しました。 - scrollTo() が完了しました。 - ユーザーがビジュアル ビューポートをスクロールした。

scrollend イベントは、次の場合は発生しません。 - ユーザーの操作でスクロール位置が変化しなかった（翻訳は行われません）。 - scrollTo() では翻訳されませんでした。

このイベントがウェブ プラットフォームに登場するまでに時間がかかった理由は、 仕様の詳細を必要とする細かな詳細を 記述していました特に複雑な分野の一つとして ビジュアル ビューポートの scrollend の詳細を明確に指定していました。 比較できます。ズームインしているウェブページを考えてみましょう。スクロールして スクロールとは必ずしも一致しません ドキュメントをご覧くださいこの視覚的なビューポートのユーザースクロールでも 操作が完了すると、scrollend イベントが生成されます。

イベントの使用

他のスクロール イベントと同様に、リスナーはいくつかの方法で登録できます。

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

または、event プロパティを使用します。

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

ポリフィルとプログレッシブ エンハンスメント

この新しいイベントを今すぐご利用になる場合は、以下のアドバイスを参考にしてください。Google Chat では 現在のスクロール終了戦略（ある場合）を使用して、 まず、以下でサポートを確認します。

'onscrollend' in window
// true, if available

ブラウザがイベントを提供しているかどうかに応じて、true または false が報告されます。あり コードを分岐できます。

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

scrollend イベントの機能強化が順調に進んでいます。 を利用できます。また、 ポリフィル （NPM）自分が作った最高の ブラウザでできること:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

ブラウザの組み込みの scrollend を使用するように、ポリフィルが段階的に強化されます。 イベントがあります。使用できない場合、スクリプトはポインタ イベントを監視し、 スクロールして、そのイベントの終了をできる限り正確に予測します。

ユースケース

スクロール中にコンピューティング負荷がかかる作業は、 説明します。これにより、スクロールが自由にメモリをフル活用し、 スムーズなエクスペリエンスが保たれます。scrollend イベントの使用 注意喚起を行って作業を行うのに最適なタイミングです。なぜなら、スクロールは 発生しなくなりました

scrollend イベントを使用して、さまざまなアクションをトリガーできます。一般的なユースケース 関連する UI 要素をスクロールの位置と同期させる 停止しました。次に例を示します。 - カルーセルのスクロール位置をドット インジケーターと同期させる。 - ギャラリー アイテムをそのメタデータと同期。 - ユーザーが新しいタブにスクロールした後のデータの取得。

ユーザーがメールをスワイプして消去するようなシナリオを想像してみてください。視聴完了後 ユーザーがスワイプすると、スクロールした位置に応じたアクションを実行できます。

また、プログラマティック取引またはユーザー アカウントの スクロール、ログ分析などの操作などです。

これは矢印、ドット、フォーカスなどの複数の要素があり、 スクロール位置に応じて更新する必要がありますこのカルーセルの作成方法を YouTube でご覧ください。また、ライブデモもご利用ください。

エンジニアリング作業に協力してくれた Mehdi Kazemi と、API と実装のガイダンスに協力してくれた Robert Flack に感謝します。