このページは 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 => {…}

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

試してみる

イベントの詳細

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 イベント）

イベントの詳細

イベントの使用

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

ユースケース

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