# scroll-snap

> スクロールスナップを使用してスムーズなスクロール体験を提供します。scroll-snap-typeとscroll-snap-alignを組み合わせて使用します。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/scroll-snap/

## 構文

```css
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
```

## Tailwindでは

- 一般形: `親に snap-x snap-mandatory、子に snap-start / snap-center`
- 補足: 構成要素は scroll-snap-type / scroll-snap-align の項を参照。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 69+ / Firefox 99+ / Safari 11+ / Edge 79+

## コード例

### 例1: 水平方向に必須スナップ、各要素を開始位置に配置

```css
scroll-snap-type: x mandatory; scroll-snap-align: start;
```

## TIPS

カルーセルやフォトギャラリーに最適

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

scroll-snapはコンテナ側（scroll-snap-type）と子側（scroll-snap-align）の2点セットで初めて動きます。AIの生成コードは片側だけの指定になりがちです。JSカルーセルライブラリの多くはscroll-snap+少量のJSで置き換えられる、というモダン化の視点も有効です。

## AIへの依頼文例

- このカルーセルライブラリをscroll-snapベースの軽量実装に置き換えられるか評価して

## 関連プロパティ

- [scroll-snap-type](https://www.css-dictionary.com/property/scroll-snap-type.md)
- [scroll-snap-align](https://www.css-dictionary.com/property/scroll-snap-align.md)
- [scroll-margin](https://www.css-dictionary.com/property/scroll-margin.md)