CSS辞書

overscroll-behavior

インタラクション・UX

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

構文

Syntax
overscroll-behavior: auto | contain | none

コード例

1

overscroll-behavior: contain;

親要素へのスクロール伝播を防ぐ

2

overscroll-behavior: none;

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

3

overscroll-behavior-y: contain;

縦方向のみスクロール伝播を防ぐ

4

overscroll-behavior: auto;

デフォルトの動作

💡 TIPS

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

⚠️ よくある間違い

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

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

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

💬 AIへの頼み方

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

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

関連プロパティ

ブラウザサポート

対応が限定的
Chrome
144+
Firefox
150+
Safari
未対応
Edge
18+

Safariは未対応。スクロール連鎖の防止が必要な場合はSafari向けの回避策も検討