このページは Cloud Translation API によって翻訳されました。

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 に感謝します。

Scrollend（新しい JavaScript イベント）

イベントの詳細

イベントの使用

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

ユースケース

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