scroll-snap-type、scroll-snap-align、scroll-snap-stopのすべての値をライブのスクロール領域で試し、アクセシビリティを保ったCSSだけのカルーセルと全画面セクションをコピーできます。
スクロールスナップを使うと、スクロールするボックスが任意の位置ではなく、指定した子要素の位置でぴたりと止まります。スクロールコンテナーにscroll-snap-type: x mandatory（またはy、proximity）を指定し、各子要素にscroll-snap-align: start、center、endのいずれかを指定します。固定ヘッダーがある場合はscroll-paddingを追加し、すべての項目で止めたい場合はscroll-snap-stop: alwaysを使います。
スクロールスナップのプロパティ一覧
以前はスクロールスナップにカルーセル用のライブラリが必要でした。今では数行のCSSで、スワイプできるカード、ページ送りのギャラリー、全画面のセクションを作れ、慣性スクロールやキーボード操作はブラウザーが処理してくれます。コードをコピーする前に、プレイグラウンドで各値の違いを体感してみてください。
mandatoryでは、スクロールが止まると、コンテナーは必ずいずれかのスナップ位置に収まります。proximityでは、スクロールがスナップ位置の近くで終わったときだけスナップするので、その間の位置で自由に読むことができます。軸だけを書いた場合のデフォルトはproximityです。
よくある原因は次のとおりです：scroll-snap-typeがスクロールする親ではなく子要素に指定されている、親が実際にはオーバーフローしていない（overflow-x: autoと固定サイズを指定してください）、子要素にscroll-snap-alignがない。ページ全体でスナップさせる場合、コンテナーはbodyではなくhtmlです。
スクロールコンテナーのscroll-padding-topにヘッダーの高さを設定します。例：html { scroll-padding-top: 64px; }。こうすると、スナップしたセクションやアンカーへのジャンプが、ヘッダーの下に隠れずにその直下で止まります。
スワイプとスクロールなら作れます。overflow-x: autoとx mandatoryのスナップを指定したflexの行は、それだけで動くカルーセルです。現在のスライドを示すドットのインジケーター、自動再生、ループには、まだ少しスクリプトが必要です。
scroll-snap-typeは2022年からChrome、Edge、Firefox、SafariでBaselineとして広く利用可能になっており、scroll-snap-stopも2022年7月から利用可能です。フォールバックなしで使えます。対応していないブラウザーでは、単に自由にスクロールするだけです。
スワイプするか、横にスクロールするか、中をクリックして矢印キーを使ってください。各カードの幅は80パーセントなので、次のカードが端に見えます。
スナップはページのスクロール領域であるhtmlに指定します。scroll-padding-topでセクションが64pxのヘッダーに隠れないようにし、proximityで長いセクションに閉じ込められるのを防ぎます。
ブラウザーは最も近いスナップ位置で移動を終えるので、カード1枚分の幅だけスクロールすると、ちょうど次のカードに止まります。
スクロールスナップのプレイグラウンド
軸
厳密さ
スライドの揃え方
すべてのスライドで止める
スクロールスナップのプレビュー、スクロールするか矢印キーを使ってください
スライド {n}
CSSをコピー
無料で始める · クレジットカード不要