scroll-snap-align

インタラクション・UX

スクロールスナップ時の子要素の配置位置を指定するプロパティです。scroll-snap-typeと組み合わせて使用します。

構文

Syntax
scroll-snap-align: none | start | end | center

コード例

例 1

scroll-snap-align: start;

要素の開始位置でスナップ

例 2

scroll-snap-align: center;

要素の中央でスナップ

例 3

scroll-snap-align: end;

要素の終了位置でスナップ

例 4

scroll-snap-align: none;

この要素ではスナップしない

💡 TIPS

カルーセルのスライドや、画像ギャラリーの各アイテムに指定する。centerを使うと見栄えが良い。

⚠️ よくある間違い

親要素にscroll-snap-typeが必要。scroll-snap-typeとセットで使わないと効果がない。

関連プロパティ

ブラウザサポート

Chrome 69+, Firefox 68+, Safari 11+