| 属性名 | overscroll-behavior-x overscroll-behavior-y |
|---|---|
| 値 | [ auto | none | contain ] |
| 初期値 | auto |
| 適用可能要素 | スクロールコンテナ要素 |
| 継承 | しない |
| サポート | https://caniuse.com/?search=overscroll-behavior-x |
スクロールが末尾に達した場合の挙動を制御します。例えばスマートフォンのブラウザではコンテンツが重なっている場合に、上側のコンテンツがスクロールの末尾に達すると、それ以降のスクロール操作が下側のコンテンツに連鎖して下側のコンテンツがスクロールしてしまいます。この挙動を防ぐ場合に、上側のコンテンツに none や contain を指定することで連鎖を抑止することが可能となります。
| 値 | 説明 |
|---|---|
| auto | ブラウザの規定の動作となります。 |
| none | 外部に対してスクロール連鎖しません。内部に対してもスクロール連鎖しません。 |
| contain | 外部に対してスクロール連鎖しません。内部に対してはスクロール連鎖します。 |
スマートフォンから overscroll-behavior-sample を参照してください。右側にボックスが2個表示されますが、上側のボックスはスクロールが末尾に達するとページ全体がスクロールしてしまいますが、下側のボックスはこの連鎖を抑制しています。
.box {
position: absolute;
top: 1rem;
right: 1rem;
height: 10rem;
width: 10rem;
border: 1px solid gray;
overflow-x: scroll;
}
.ob-none {
overscroll-behavior: none;
top: 12rem;
}
<pre class="box"> auto AAA BBB : </pre> <pre class="box ob-none"> none AAA BBB : </pre> <pre> AAA BBB : </pre>