スクロールスナップ — 動きの伝え方辞典

scroll

scroll snap / CSS scroll snapping

スクロールスナップ

スクロールがセクション単位でピタッと止まるCSS標準の機能。JSでスクロールを乗っ取るハイジャックと違い、操作の主導権をユーザーに残したまま止まる位置だけを揃えるため破綻しにくい。フルスクリーンのプレゼン型ページの定番。

01 — Demo video

Play live →

02 — Prompt template

セクション単位でピタッと止まる scroll snap を実装してください。

- JSは使わず、CSSのみで実装する。スクロールコンテナに scroll-snap-type: y {{strictness}} を指定する
- 各セクションに scroll-snap-align: {{align}} を指定する(親子セットで書かないと何も起きない)
- wheelイベントを乗っ取ってスクロール位置をJSで動かす「スクロールハイジャック」は実装しない(操作の主導権はユーザーに残す)
- 固定ヘッダーがある場合は scroll-padding-top でスナップ位置をヘッダーの高さ分ずらす
- ビューポートより高いセクションが混ざる場合、mandatoryだと中身が読めなくなるため proximity に落とす
- prefers-reduced-motion 時は、scroll-behavior: smooth を併用しているなら auto に戻す(snap自体はユーザー操作主導なので残してよい)

セクション単位でピタッと止まる scroll snap を実装してください。

- JSは使わず、CSSのみで実装する。スクロールコンテナに scroll-snap-type: y {{strictness}} を指定する
- 各セクションに scroll-snap-align: {{align}} を指定する(親子セットで書かないと何も起きない)
- wheelイベントを乗っ取ってスクロール位置をJSで動かす「スクロールハイジャック」は実装しない(操作の主導権はユーザーに残す)
- 固定ヘッダーがある場合は scroll-padding-top でスナップ位置をヘッダーの高さ分ずらす
- ビューポートより高いセクションが混ざる場合、mandatoryだと中身が読めなくなるため proximity に落とす
- prefers-reduced-motion 時は、scroll-behavior: smooth を併用しているなら auto に戻す(snap自体はユーザー操作主導なので残してよい)

セクション単位でピタッと止まる scroll snap を実装してください。

- JSは使わず、CSSのみで実装する。スクロールコンテナに scroll-snap-type: y {{strictness}} を指定する
- 各セクションに scroll-snap-align: {{align}} を指定する(親子セットで書かないと何も起きない)
- wheelイベントを乗っ取ってスクロール位置をJSで動かす「スクロールハイジャック」は実装しない(操作の主導権はユーザーに残す)
- 固定ヘッダーがある場合は scroll-padding-top でスナップ位置をヘッダーの高さ分ずらす
- ビューポートより高いセクションが混ざる場合、mandatoryだと中身が読めなくなるため proximity に落とす
- prefers-reduced-motion 時は、scroll-behavior: smooth を併用しているなら auto に戻す(snap自体はユーザー操作主導なので残してよい)

03 — Params

strictness(スナップ強制度) — 選択: mandatory / proximity（初期: mandatory）
mandatoryは必ずスナップ位置で止まる。proximityは近いときだけ吸い付き、途中でも止まれる。長いセクションが混ざるならproximity。
align(吸着位置) — 選択: start / center（初期: start）
セクションのどこをスクロール位置に合わせるか。フルスクリーンはstart、カード列はcenterが定石。

04 — Vocab

scroll-snap-type — スクロールコンテナ(親)側に置く宣言。軸(y / x / both)と強制度(mandatory / proximity)を決める。
scroll-snap-align — 子要素側に置く吸着位置の宣言。start / center / endから選ぶ。親のsnap-typeとセットで初めて効く。
mandatory / proximity — 必ず止まるか、近いときだけ吸い付くか。1画面に収まらないセクションがあるならproximity一択。
スクロールハイジャック — JSがスクロール操作を乗っ取って位置を強制する手法。scroll-snapはその安全な代替で、操作の主導権がユーザーに残る。
scroll-padding — スナップ位置のオフセット。固定ヘッダーの高さ分だけ止まる位置をずらすのに使う。

05 — NG → OK examples

言い方: 「「スクロールを1画面ずつピタッと止まるようにして」」

なぜNG: wheelをpreventDefaultしてJSでスクロールを奪うハイジャック実装が返ってきやすい。トラックパッドの慣性やスマホで挙動が破綻し、アクセシビリティも損なう。CSSのscroll-snapで済むことをJSで再発明させてしまう。

言い方: 「「scroll-snap-type: y mandatory + 各セクションにscroll-snap-align: start、CSSのみで実装。JSのハイジャック禁止。ビューポートより高いセクションがあればproximityに落とす」」

なぜOK: CSSのみ・プロパティ名・強制度の使い分けまで指定している。「ハイジャック禁止」の一言で最悪の実装を確実に避けられる。