【CSS Modules】overscroll-behavior-inlineプロパティの使い方

overscroll-behavior-inlineプロパティは、スクロール可能な要素（スクロールコンテナ）において、インライン方向のスクロールがその終端に達した際の挙動を制御するプロパティです。インライン方向とは、文字が書かれる方向、すなわち多くの場合で水平方向を指し、このプロパティは overscroll-behavior-x プロパティと似た役割を持ちますが、文書の書字方向（writing-mode）に応じて方向が自動的に適用される点が異なります。

このプロパティを使用すると、スクロールコンテナがコンテンツの最後までスクロールされた際に、そのスクロールが親要素やドキュメント全体へ「連鎖」して伝播するのを防ぐことができます。例えば、モーダルダイアログや特定のコンポーネント内でスクロール可能なエリアがある場合、そのエリアのスクロールが終了した後も背後のページが予期せずスクロールしてしまう、いわゆる「スクロール連鎖」を抑制し、ユーザー体験を向上させるのに役立ちます。

設定可能な値は以下の通りです。autoはデフォルト値で、スクロールがコンテナの端に達すると親要素へ伝播します。containは、親要素へのスクロール伝播を防ぎますが、現在のコンテナ自身のスクロール終了時に表示される「跳ね返り」のような視覚効果は維持されます。最後に、noneは、親要素へのスクロール伝播を防ぐだけでなく、現在のコンテナ自身のスクロール終了時の「跳ね返り」効果も無効にします。これにより、より厳密なスクロール制御が可能となり、アプリケーションのインタラクション設計において重要な役割を果たします。

Copy
1selector {
2  overscroll-behavior-inline: auto | contain | none;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません