こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
最近のWebデザインでは、スマートなスクロール体験が求められるようになってきました。
その中でも注目されているのが、スナップスクロール。
これは、スクロールした際に指定した位置でピタッと要素が止まる動きです。
CSSだけで実装可能な scroll-snap を使えば、JavaScriptを使わずに滑らかなUXを実現できます。
scroll-snapとは？
scroll-snap は、CSSのプロパティ群で、スクロール位置を特定の要素に「スナップ」させる機能です！
主に縦・横スクロールどちらにも対応し、ユーザーがスクロールした際に、スクロール先の要素がぴったり整列して表示されるようになります。
実装例：縦方向のスナップスクロール
以下のコードは、縦に3つのセクションを用意して、スナップスクロールを有効にする例です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ポイント
scroll-snap-type で「y mandatory」を指定すると、縦方向にスクロールしたときに要素がスナップされます。
横方向のスナップスクロール
横スクロールで画像ギャラリーなどを作成する場合にも scroll-snap は便利です！
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- モバイル向けに使いやすい横スクロールUX
- JavaScript不要で軽量な実装
注意点と対応ブラウザ
- scroll-snap-align の値は start / center / end などがある
- 親要素に overflow を設定しないと機能しない
- Safariや古いブラウザでは一部サポートが不完全
補足
スナップの強制度は mandatory と proximity があります。
必ずスナップさせたい場合は mandatory を選びましょう。
必ずスナップさせたい場合は mandatory を選びましょう。
まとめ
scroll-snap は、ユーザー体験を向上させる強力なCSS機能の一つです。
特にスマホサイトやLP（ランディングページ）で直感的な動きが求められる場合に効果を発揮します！
JavaScriptを使わず、簡単に導入できる点も魅力的ですね。
ぜひ、Web制作に活用してみてください！
satokotadesignキャンペーン実施中！
