# overscroll-behavior

> スクロール領域の境界に達した時の動作を制御するプロパティです。auto、contain、noneの値があり、スクロールチェーン（親要素へのスクロール伝播）を防ぐのに便利です。

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

## 構文

```css
overscroll-behavior: auto | contain | none
```

## ブラウザ対応

- 対応が限定的
- Chrome 144+ / Firefox 150+ / Safari 未対応 / Edge 18+
- 補足: Safariは未対応。スクロール連鎖の防止が必要な場合はSafari向けの回避策も検討

## コード例

### 例1: 親要素へのスクロール伝播を防ぐ

```css
overscroll-behavior: contain;
```

### 例2: スクロール伝播とバウンス効果を無効化

```css
overscroll-behavior: none;
```

### 例3: 縦方向のみスクロール伝播を防ぐ

```css
overscroll-behavior-y: contain;
```

### 例4: デフォルトの動作

```css
overscroll-behavior: auto;
```

## TIPS

モーダル内でスクロールした時、背景がスクロールするのを防げる。モバイルでの「引っ張って更新」を無効化できる。

## よくある間違い

overflowが設定されている要素に指定する必要がある。すべてのブラウザで完全にサポートされているわけではない。

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

モーダル内スクロールが端に達すると背面ページまでスクロールする「スクロール連鎖」を止めるのがoverscroll-behavior: containです。AIはこの問題にbodyのoverflow: hidden切替（JS）を提案しがちですが、CSSだけで解ける場面が多いです。ただしSafariは未対応のため、Safari要件があるなら従来法との併用が必要です。

## AIへの依頼文例

- モーダル内で端までスクロールすると背面まで動く問題を、overscroll-behaviorとSafari向けフォールバックの二段構えで対策して

## 関連プロパティ

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