スクロール領域の境界に達した時の動作を制御するプロパティです。auto、contain、noneの値があり、スクロールチェーン(親要素へのスクロール伝播)を防ぐのに便利です。
overscroll-behavior: auto | contain | noneoverscroll-behavior: contain;親要素へのスクロール伝播を防ぐ
overscroll-behavior: none;スクロール伝播とバウンス効果を無効化
overscroll-behavior-y: contain;縦方向のみスクロール伝播を防ぐ
overscroll-behavior: auto;デフォルトの動作
モーダル内でスクロールした時、背景がスクロールするのを防げる。モバイルでの「引っ張って更新」を無効化できる。
overflowが設定されている要素に指定する必要がある。すべてのブラウザで完全にサポートされているわけではない。
モーダル内スクロールが端に達すると背面ページまでスクロールする「スクロール連鎖」を止めるのがoverscroll-behavior: containです。AIはこの問題にbodyのoverflow: hidden切替(JS)を提案しがちですが、CSSだけで解ける場面が多いです。ただしSafariは未対応のため、Safari要件があるなら従来法との併用が必要です。
モーダル内で端までスクロールすると背面まで動く問題を、overscroll-behaviorとSafari向けフォールバックの二段構えで対策して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。
Safariは未対応。スクロール連鎖の防止が必要な場合はSafari向けの回避策も検討