スクロールスナップコンテナの動作を定義するプロパティです。カルーセルやフルページスクロールの実装に使用します。
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?| snap-x | scroll-snap-type: x var(--tw-scroll-snap-strictness) |
| snap-mandatory | --tw-scroll-snap-strictness: mandatory |
| snap-proximity | --tw-scroll-snap-strictness: proximity |
snap-x snap-mandatory のように2つ重ねて使う。
scroll-snap-type: x mandatory;横スクロールで必ずスナップ位置に吸着
scroll-snap-type: y proximity;縦スクロールでスナップ位置に近い場合のみ吸着
scroll-snap-type: both mandatory;縦横両方向で必ずスナップ
scroll-snap-type: none;スナップ無効
JavaScriptなしでカルーセルやフルページスクロールを実装できる。mandatoryは確実にスナップ、proximityは近い場合のみスナップ。
子要素にscroll-snap-alignを指定しないと機能しない。overflowが設定されているコンテナに指定する必要がある。
mandatoryとproximityの選択は重要で、AIは安易にmandatoryを選びがちです。mandatoryはスナップ点の間に長いコンテンツがあると「どこにも止まれず読めない」事故を起こすため、内容の高さが読み切れる保証がない縦スクロールではproximityが安全です。スナップ位置は子側のscroll-snap-alignとセットで機能します。
横スワイプのカルーセルをscroll-snapで実装して。mandatoryとproximityの選択理由も説明して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。