k8o

← Playgrounds一覧に戻る
Web APIデモ2

scrollend

スクロール操作が完了したときに発火するイベントです。

scrollendイベント

リストをスクロールすると、連続発火するscrollと停止時に1回だけ発火するscrollendの回数を比較できます。

scroll発火:0
scrollend発火:0

アイテム 1

スクロールしてscrollendイベントの発火を確認してください

アイテム 2

スクロールしてscrollendイベントの発火を確認してください

アイテム 3

スクロールしてscrollendイベントの発火を確認してください

アイテム 4

スクロールしてscrollendイベントの発火を確認してください

アイテム 5

スクロールしてscrollendイベントの発火を確認してください

アイテム 6

スクロールしてscrollendイベントの発火を確認してください

アイテム 7

スクロールしてscrollendイベントの発火を確認してください

アイテム 8

スクロールしてscrollendイベントの発火を確認してください

アイテム 9

スクロールしてscrollendイベントの発火を確認してください

アイテム 10

スクロールしてscrollendイベントの発火を確認してください

アイテム 11

スクロールしてscrollendイベントの発火を確認してください

アイテム 12

スクロールしてscrollendイベントの発火を確認してください

アイテム 13

スクロールしてscrollendイベントの発火を確認してください

アイテム 14

スクロールしてscrollendイベントの発火を確認してください

アイテム 15

スクロールしてscrollendイベントの発火を確認してください

アイテム 16

スクロールしてscrollendイベントの発火を確認してください

アイテム 17

スクロールしてscrollendイベントの発火を確認してください

アイテム 18

スクロールしてscrollendイベントの発火を確認してください

アイテム 19

スクロールしてscrollendイベントの発火を確認してください

アイテム 20

スクロールしてscrollendイベントの発火を確認してください

上のエリアをスクロールすると、scroll イベントは連続して発火しますが、scrollend イベントはスクロールが完全に終了したときのみ発火します。

発火条件

ボタンからのscrollTo()やscroll-snapの横スクロールでもscrollendが発火することを確認できます。

scrollend:0

scrollTo() API

アイテム 1
アイテム 2
アイテム 3
アイテム 4
アイテム 5
アイテム 6
アイテム 7
アイテム 8
アイテム 9
アイテム 10

scroll-snap

1スナップ
2スナップ
3スナップ
4スナップ
5スナップ
6スナップ
7スナップ
8スナップ

横にスクロールするとスナップします