CSS - overscroll-behavior-*

トップ > CSSリファレンス > overscroll-behavior-*

概要

属性名 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個表示されますが、上側のボックスはスクロールが末尾に達するとページ全体がスクロールしてしまいますが、下側のボックスはこの連鎖を抑制しています。

CSS
.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;
}
HTML
<pre class="box">
  auto
  AAA
  BBB
   :
</pre>
<pre class="box ob-none">
  none
  AAA
  BBB
   :
</pre>
<pre>
  AAA
  BBB
   :
</pre>

関連項目

overscroll-behavior

リンク


Copyright (C) 2022 杜甫々
初版:2022年8月14日、最終更新:2022年8月14日
http://www.tohoho-web.com/css/prop/overscroll-behavior-x.htm