overscroll-behavior
overscroll-behavior は、スクロールできる箱を端までスクロールしたあと、外側のページまで続けてスクロールするか（スクロールチェーン）を決めます。モーダルやチャット欄の中をスクロールしたときに、後ろのページまで動かないようにできます。
構文
[ contain | none | auto ]{1,2}プレビュー
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
overscroll-behaviorcontainoverscroll-behavior-x
containoverscroll-behavior-y
コード
.box {
overflow: auto;
overscroll-behavior: contain;
}コントロール
overscroll-behavior
横と縦を同じ値にする
overscroll-behaviorcontain
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
解説
値の書き方
auto：初期値です。端まで来たら、外側のスクロールできる箱やページが続けてスクロールします。スマートフォンの跳ね返りや、引っぱって再読み込み、スワイプでの「戻る」も起きます。contain：外側へは続けてスクロールしません。箱の中での跳ね返りなどの表示はそのまま残ります。none：containに加えて、箱の中での跳ね返りなどの表示も出しません。
値を 2 つ書くと、1 つ目が横（overscroll-behavior-x）、2 つ目が縦（overscroll-behavior-y）になります。1 つだけなら両方に同じ値が入ります。
仕様には、外側へは続けてスクロールし、箱の中での跳ね返りなどの表示だけを止める chain もあります。Chrome・Edge 150 と Firefox 157 から使えますが、このページの構文の表示が対応していないので、構文とプレビューからは外しています。
プレビューの試し方
このページのプレビューは、補助の宣言で overflow: auto にして、長い文章の箱をスクロールできるようにしています。箱の中にマウスを置いて下までスクロールし、そのままホイールを回し続けてください。auto ではこのページ全体が続けてスクロールし、contain や none では止まります。画面に出ている見た目は値によって変わりません。
よく使う場面
- モーダルやドロワーの中のスクロールで、後ろのページが動かないようにする（
overscroll-behavior: contain）。 - スマートフォンで、ページを下に引っぱったときの再読み込みを止める（html や body に
overscroll-behavior-y: noneかcontain）。
気をつけること
- 効くのはスクロールできる箱（
overflowがauto・scroll・hiddenの箱）とページ全体です。 - Safari と、Chrome 143 以前・Firefox 149 以前では、中身があふれていない（スクロールする量がない）箱では効かず、外側へ続けてスクロールします。モーダルの中身が短いときなどに気をつけます。