# scroll-snap-type

> スクロールスナップコンテナの動作を定義するプロパティです。カルーセルやフルページスクロールの実装に使用します。

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

## 構文

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

## Tailwindでは

- `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つ重ねて使う。

## ブラウザ対応

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

## コード例

### 例1: 横スクロールで必ずスナップ位置に吸着

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

### 例2: 縦スクロールでスナップ位置に近い場合のみ吸着

```css
scroll-snap-type: y proximity;
```

### 例3: 縦横両方向で必ずスナップ

```css
scroll-snap-type: both mandatory;
```

### 例4: スナップ無効

```css
scroll-snap-type: none;
```

## TIPS

JavaScriptなしでカルーセルやフルページスクロールを実装できる。mandatoryは確実にスナップ、proximityは近い場合のみスナップ。

## よくある間違い

子要素にscroll-snap-alignを指定しないと機能しない。overflowが設定されているコンテナに指定する必要がある。

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

mandatoryとproximityの選択は重要で、AIは安易にmandatoryを選びがちです。mandatoryはスナップ点の間に長いコンテンツがあると「どこにも止まれず読めない」事故を起こすため、内容の高さが読み切れる保証がない縦スクロールではproximityが安全です。スナップ位置は子側のscroll-snap-alignとセットで機能します。

## AIへの依頼文例

- 横スワイプのカルーセルをscroll-snapで実装して。mandatoryとproximityの選択理由も説明して

## 関連プロパティ

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