【すくろーる】
スクロール とは？
最終更新:
💡 表示位置を動かして、続きを見る
表示位置を動かし、画面や枠に収まらない内容を見る操作。上下・左右の移動、スワイプとの違い、追加読み込みと開発時の検知方法を解説します。
📌 このページのポイント
- 画面や枠に収まらない内容を、表示位置を変えて見る
- 上下だけでなく左右に移動する場合もある
- 指を滑らせるスワイプは、操作方法の一つ
- 表示位置の移動と、追加のデータ読み込みは別の処理
ひよこ スクロールは、画面そのものを動かすこと？
ペンギン先生 画面や枠の中で、表示している位置を変える操作だよ。長い文章の下の部分を見る、といった場面だ。上下だけでなく、横に長い内容を左右に移動して見る場合もある。
ひよこ マウスのホイール以外でもできる？
ペンギン先生 スクロールバーや、タッチ操作、キーボードなどで操作できる場合がある。具体的な方法は、端末やアプリ、今操作している場所によるよ。同じ入力が、いつもスクロールになるとは限らない。
ひよこ スワイプと、同じこと？
ひよこ ずっと下へ行くと、内容が増えるページは？
ペンギン先生 表示位置の移動に合わせて、追加の内容を読み込む方式だね。無限スクロールと呼ばれることがあるけれど、実際のデータに終わりがないという意味ではない。移動と読み込みは別の処理だよ。
ひよこ 開発では、移動をどう検知する？
ペンギン先生 scrollイベントで移動に応じた処理を行える。頻繁に発生するので、重い処理には注意する。要素と表示範囲の交わりの変化を調べたい場合は、Intersection Observerという別の仕組みもある。目的に合わせて選ぶんだ。
もっと詳しく知りたい人へ
下へスクロールすると、文章はどちらへ動く？
文章の下の部分が表示されるように表示位置が進むため、画面内の文章は上へ移動して見えます。指やホイールの動きとの対応は、端末や設定により異なります。
Intersection Observerなら、移動量も正確に分かる？
主に要素と表示範囲などの交わりの変化を、非同期で観測する仕組みです。正確なスクロール位置や移動量の取得と同じ役割ではありません。何を検知したいかに合わせ、位置の情報やイベントを使い分けます。
まとめ：ざっくりこれだけ覚えればOK！
「スクロール」って出てきたら「表示位置を動かして、画面に収まらない内容を見る操作」と思えばだいたいOK！
📖 おまけ：英語の意味
「Scroll」 ＝ 画面や表示枠の中で、表示位置を移動すること
💬 ページ全体だけでなく、文章や一覧を表示する枠の中を移動する場合もあります。