Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

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

overscroll-behavior-blockプロパティの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

overscroll-behavior-blockプロパティは、スクロールコンテナの端に到達した際のブラウザのスクロール挙動を制御するために使用されるプロパティです。このプロパティを使用すると、ユーザーが特定のスクロール可能な要素、例えばウェブページの特定のセクションやモーダルダイアログ内でコンテンツを最後までスクロールした後、さらにスクロールを試みた際に、そのスクロール動作が意図せず親の要素やドキュメント全体に伝播してしまう現象、いわゆる「スクロールチェイニング」を防ぐことができます。

overscroll-behavior-blockは、CSSの論理プロパティの一つであり、writing-modeプロパティによって定義されるブロック軸方向のオーバーフロー動作に影響を与えます。一般的な横書きの言語設定(例えば日本語や英語)では、このブロック軸は垂直方向、つまり上下のスクロールを指します。

このプロパティにより、ユーザーは特定の領域内でのスクロールに集中でき、例えばオーバーレイ表示されたコンテンツ内でのみスクロールを行い、その背景のページが動かないようにする、といったユーザーインターフェースの改善に貢献します。指定できる値には、デフォルトの動作を許可するauto、スクロールの伝播を防止するcontain、伝播を防止しつつブラウザのデフォルトのスクロールオーバーフロー効果(例えばiOSのラバーバンド効果など)も無効化するnoneなどがあります。ウェブアプリケーションやウェブサイトのユーザー体験を細やかに制御し、より直感的なスクロール操作を実現するために重要なプロパティです。

公式リファレンス: overscroll-behavior-block

構文(syntax)

1overscroll-behavior-block: auto;

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語