scrollendイベントスニペットジェネレーターとは
scrollendイベントは、スクロールが完全に完了したときに発火するブラウザネイティブイベントです。これには慣性スクロール、ラバーバンディング、慣性減衰が含まれます。スクロール中に連続して発火するscrollイベントや、任意のタイムアウトに基づいてスクロールが停止したことを推測するデバウンスされたスクロールハンドラとは異なり、scrollendはユーザーのスクロールジェスチャーが実際に終了したときに正確に1回発火します。このイベントは、プログラムによるスクロール（scrollTo、scrollBy、scrollIntoView）と、タッチ、マウスホイール、キーボード、トラックパッドによるユーザー開始スクロールの両方で発火します。Baseline 2025、Chrome 114+、Edge 114+、Safari 17.5+、Firefox 131+でサポートされています。
クイックアンサー
scrollendイベントは、慣性、慣性減衰、ラバーバンディングを含むスクロールが完全に完了したときに発火します。任意のタイムアウトでスクロール終了を推測するデバウンスされたスクロールハンドラとは異なり、scrollendは真の最終スクロール位置で正確に1回発火するブラウザネイティブシグナルです。Baseline 2025（Chrome 114+、Safari 17.5+、Firefox 131+）。正確な無限スクロールトリガー、スクロール位置ベースのUI更新、アナリティクスインプレッションに使用します。
Last updated: 2026-06-02
制限事項
- scrollendは実際のスクロール可能なオーバーフローを持つ要素でのみ発火します。overflow:scrollがあるが寸法を超えるコンテンツがない要素は、scrollendを発火しません。イベントに依存する前に、要素にスクロール可能なコンテンツがあることを常に確認してください。
- scrollendは継続的なスクロール中には発火しません。完了のみを通知します。スクロールジェスチャ中のリアルタイムスクロール追跡には、スムーズな更新のためにrequestAnimationFrameと組み合わせたscrollイベントが依然として必要です。
- scrollendは中断されたプログラムによるスクロールでは発火しない可能性があります。scrollToまたはscrollByの呼び出しが完了前に別のスクロール呼び出しによって中断された場合、保留中のscrollendはキャンセルされる可能性があります。常に実行されることを前提とするのではなく、scrollendハンドラコールバック内で依存アクションをチェーンしてください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- スニペットタイプを選択します。要素またはウィンドウターゲットを使用した基本のscrollendリスナー、スクロール位置ログ付きのscrollend、またはscrollendとデバウンスされたスクロールの比較。
- スクロールターゲットを設定します。window（ドキュメントレベルのスクロール）またはoverflow:auto/overflow:scrollを持つ特定の要素。
- ハンドラアクションをカスタマイズします。最終スクロール位置のログ、UI要素の更新、下部でのコンテンツの追加読み込み、スクロール停止時のアニメーションのトリガー。
- 生成されたJavaScriptスニペットをコピーしてプロジェクトに貼り付けます。比較スニペットは両方のアプローチをタイミングラベルとともに表示するため、ライブデモで違いを確認できます。
主な用途
- 慣性スクロール中の複数回の読み込みを避け、ユーザーが実際にスクロールを停止したときのみ無限スクロールコンテンツの読み込みをトリガーします。
- 中間位置ではなく正確な最終スクロール位置で、スティッキー目次やスクロール進行インジケーターを更新します。
- ユーザーがセクションへのスクロールを終えたときにアナリティクスイベントやインプレッション追跡を発火させ、正確な測定を保証し二重カウントを防止します。