こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今やあらゆるサイトで目にする「横スクロール型のスライダーUI」。
JavaScriptでライブラリを導入し、
スライド幅や移動アニメーションを制御するのが一般的ですが、
実はそれ、CSSだけでできるって知っていましたか？
その鍵となるのが Scroll Snap（スクロールスナップ）です。
今回はこのScroll Snapを使って、スムーズかつ軽量なスライダーUIを構築する方法をご紹介します。
Scroll Snapとは？
Scroll Snapは、スクロール中の要素の端や中央などに自動的に「ピタッ」と止まるスナップ機能を提供するCSS仕様です。
要素の幅や動きのタイミングを細かく計算しなくても、
滑らかに1枚ずつスライド表示のような体験が作れます。
- ライブラリ不要、JavaScript最小限
- ネイティブな挙動でスマホにも強い
- 慣性スクロール＋スナップの自然な動き
基本のHTML構造とCSS
スライダーの基本構成は「親コンテナ（横スクロール）＋子アイテム（スナップ対象）」です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ここがポイント！
scroll-snap-type で「x方向に必ずスナップ」指定。 scroll-snap-align は各スライドの揃え方。
start にすれば左端に整列します。 scroll-behavior: smooth でスライド間の移動もスムーズに。 ページ送りボタンをJSで追加する
スワイプだけでも使えますが、PCユーザーのために「次へ・前へ」ボタンも設置したいですよね。
実際には scrollLeft を使えば簡単に制御できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
JSは“補助”に徹する
スライド機能の本体はCSSのScroll Snap。
JavaScriptは単に「scrollBy」で位置をずらしているだけなのでとても軽量です。
JavaScriptは単に「scrollBy」で位置をずらしているだけなのでとても軽量です。
まとめ
Scroll Snapの魅力は「軽い・簡単・美しい」
スライダーといえば「複雑・重たい・バグが起きやすい」イメージがありますが、 Scroll Snapを使えば驚くほどシンプルなコードで、 スマホにもPCにもフィットする美しいUIが構築できます。
特に「表示領域ごとに切り替えるUI」が必要な場面にはぴったりです。
ぜひ一度、CSSだけで完結するScroll Snapスライダーを試してみてください。
satokotadesignキャンペーン実施中！
