CSS辞書

scroll-snap-align

インタラクション・UX

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

構文

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

Tailwindでは

snap-startscroll-snap-align: start
snap-centerscroll-snap-align: center
snap-align-nonescroll-snap-align: none

コード例

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とセットで使わないと効果がない。

🤖 AIがよく間違えるポイント

スナップの吸着位置を決めるのは「子要素側」のscroll-snap-alignで、コンテナに書いても効きません——コンテナ側(type)と子側(align)の役割分担はAIの生成コードでも崩れがちです。startとcenterの使い分け(一覧はstart、ギャラリーはcenter)が定番です。

💬 AIへの頼み方

このscroll-snapが効かない原因を、コンテナ側と子側の指定の役割分担から調査して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

Baseline 広く利用可能
Chrome
69+
Firefox
68+
Safari
11+
Edge
79+