CSS - overscroll-behavior-*

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

概要

説明

スクロールが末尾に達した場合の挙動を制御します。例えばスマートフォンのブラウザではコンテンツが重なっている場合に、上側のコンテンツがスクロールの末尾に達すると、それ以降のスクロール操作が下側のコンテンツに連鎖して下側のコンテンツがスクロールしてしまいます。この挙動を防ぐ場合に、上側のコンテンツに 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>

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-x
• https://drafts.csswg.org/css-overscroll-1/#propdef-overscroll-behavior-x