導入：なぜ「スクロールの連鎖」を制御する必要があるのか
Webサイト制作において、モーダルウィンドウやサイドバー、あるいは固定ヘッダー内のスクロール領域を実装した際、「中身をスクロールしきった後に、背後のメインコンテンツまで一緒に動いてしまった」という経験はありませんか？これはブラウザの「スクロール連鎖（Scroll Chaining）」という標準機能によるものです。UXの観点では、ユーザーが操作したい領域だけを動かすのが正解です。この課題を一行のCSSで解決できるのが、overscroll-behavior-yプロパティです。
基礎知識：スクロール連鎖とオーバースクロール
スクロール連鎖とは、ある要素のスクロールが限界（端）に達したとき、その親要素や背景にある要素までスクロールが伝播してしまう現象を指します。また、iOSやAndroidで見られる「引っ張って更新」や「跳ね返り（バウンス）」効果も、このオーバースクロール動作の一つです。overscroll-behavior-yを使うことで、この「垂直方向」の挙動をコントロールし、意図しないスクロール伝播を遮断できるようになります。
実装・解決策：containとnoneの使い分け
このプロパティには主に3つの値を指定します。
auto：デフォルト値。連鎖が発生します。
contain：要素内のスクロールは維持しますが、親要素への連鎖を阻止します。
none：連鎖を阻止し、ブラウザ独自のバウンス効果も完全に無効化します。
現場での実装では、モーダルやドロワーメニューにはcontain、あるいは完全に余計な挙動を省きたい場合はnoneを選択するのが一般的です。
サンプルプログラム：モーダル内スクロールの固定
以下のコードは、モーダルウィンドウ内のコンテンツが長い場合に、モーダル内のスクロールだけを許可し、背景のページ全体が動かないようにする実装例です。
ここがモーダルの中身です。
どれだけスクロールしても、背後のページは動きません。
応用・注意点：現場で陥りやすいバグの回避策
1. iOSの「引っ張って更新」との兼ね合い
noneを指定すると、モバイルブラウザの「プル・トゥ・リフレッシュ（画面を下に引っ張ってリロード）」機能まで無効化されます。アプリのような操作感を出したい場合は有効ですが、ユーザーが意図的に更新したい場合に不便を感じる可能性があるため注意してください。
2. 指定対象を間違えない
このプロパティは「スクロールする要素（overflowが設定されている要素）」自身に指定する必要があります。親要素に指定しても効果がないため、デバッグ時に挙動が変わらない場合は、セレクタが対象のコンテナを正しく指しているか確認しましょう。
3. 互換性について
主要なモダンブラウザでは2022年以降問題なく動作します。レガシー環境を考慮する必要がある場合のみ、念のため検証機で確認することをお勧めしますが、現在の実務においては積極的に採用して良いプロパティです。
コメント