[css]ブラウザスクロールイベント(overscroll-behavior)をブロック

overflow: scrollを使用して、コンテンツオーバーフローのスクロールバーを作成できます.
スクロールバーにスクロールが表示される場合があります.

overscroll-behavior

デフォルトでは、ブラウザはリンクをスクロールします.
内部スクロールが完了すると、スクロールは外部または同じレベルのElementで続行されます.
これを防ぐのはoverscroll-behaviorです.

属性(3種類)

auto

The default scroll overflow behavior occurs as normal.
スクロールリンクが表示されます.(これはブラウザのデフォルトのスクロール動作です.)

contain

Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce"effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
sibling要素の場合、スクロールチェーンは表示されません.
child要素の場合、スクロールチェーンが表示されます.

none

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.
child Elementにもスクロールチェーンは表示されません.

Example(containとnoneの比較)

次の例ではcontainとnoneを比較します.
( サンプルリンク )

outerのchild(inner)があれば

最初の例では、noneが内部に追加されています.内枠のスクロールが終了すると、外枠のスクロールは発生しません.

html

<div className="wrapper">
  <div className="outer">
    <div className="inner">
      <div className="start">Start(inner)</div>
      <div className="content"></div>
      <div className="end">End(inner)</div>
    </div>
    <div className="start">Start(outer)</div>
    <div className="content"></div>
    <div className="end">End(outer)</div>
  </div>
</div>

css

.inner {
  overscroll-behavior: none;
}

outerとinnerがsibling(同じレベル)の場合

この場合もcontainを使用できます.(containは同じレベルの要素のスクロールをブロックします.)
あるいは、なし.

html

<div className="wrapper">
  <div className="outer--contain">
    <div className="start">Start(outer)</div>
    <div className="content"></div>
    <div className="end">End(outer)</div>
  </div>
  <div className="inner--contain">
    <div className="start">Start(inner)</div>
    <div className="content"></div>
    <div className="end">End(inner)</div>
  </div>
</div>

css

.inner {
  overscroll-behavior: contain;
}