Scroll Snap
スクロールスナップ
どんな動き？
通常は途中の中途半端な位置で止まってしまうスクロールを、セクションの境目にきっちり吸い付くように止める動き。スクロールを少しでも進めると次のセクションの先頭までピタッと引き込まれるため、スライド形式のプレゼンのような気持ちよい操作感が生まれる。CSSのscroll-snapプロパティだけで実装できる手軽さも魅力。
よく使う場所
プレゼン風LPフルスクリーンセクションストーリーページ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Snap scrolling so each section locks precisely into alignment with the viewport instead of stopping at an arbitrary position.Trigger:
Scroll input crossing roughly halfway into the next section.
Start:
The user scrolls past a section's snap threshold.
End:
The section's edge aligns exactly with the viewport edge and scrolling momentarily stops there.
Behavior:
Once scroll position passes a section's snap point, the browser pulls the scroll position the rest of the way to a perfect alignment, so the user always lands cleanly on a section boundary rather than a partial scroll.
Initial state:
Section partially in view, scroll position mid-transition
Final state:
Section fully aligned with the viewport, scroll position locked until the next scroll input実装方法の候補
この動きは以下の技術で実装できます。
CSS scroll-snapfullPage.jsSwiper
別名・関連ワード
Section SnapSnap ScrollingFull Page Snap