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が設定されている要素に指定する必要がある。すべてのブラウザで完全にサポートされているわけではない。

関連プロパティ

ブラウザサポート

Chrome 63+, Firefox 59+, Safari 16+