position: fixedで配置した要素の後ろの要素がスクロールしてしまう
モーダルウインドウなどposition: fixedでスクロール可能な要素を固定して配置した場合、要素の下部の境界に到達するとブラウザは次にbody要素をスクロールし始めてしまいます。
これはスクロールチェーンと呼ばれるデフォルトの動作の影響です。
overscroll-behaviorでスクロール連鎖を防止
overflow: autoおよびoverflow: scrollが指定されたスクロール可能なコンテナーに対し、CSSプロパティ「overscroll-behavior」を指定することで制御可能です。
containまたはnoneを指定することで、スクロール連鎖を止める事ができます。
.modal {
overscroll-behavior-y: contain; またはnone;
}※overflow同様、y軸とx軸それぞれに指定することが可能です。
注意点
スクロールバーが発生しないスクロール不可能な要素だった場合は、overscroll-behaviorプロパティは無視されてしまいます。例えば、overflow: auto;を設定していた場合でも、中身の要素が小さく、スクロールバーが出ていない状態では反応しません。スクロールバーが出る状態になって初めて「overscroll-behavior」が反応します。
