[css] 브라우저 scroll 이벤트 막기 (overscroll-behavior)

넘치는 내용에 대한 scroll은 overflow: scroll로 만들 수 있습니다.
scroll 안에 scroll이 있는 경우가 있습니다.

overscroll-behavior

브라우저에서는 기본적으로 scroll chaining이 발생합니다.
내부 스크롤이 끝나면 바깥쪽 혹은 같은 레벨에 있는 Element에서 스크롤이 계속됩니다.
이런 현상을 막기 위한것이 overscroll-behavior입니다.

속성 (3가지)

auto

The default scroll overflow behavior occurs as normal.

scroll chaining이 발생합니다. (브라우저 기본 스크롤 동작입니다.)

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 element에 대해서는 scroll chain이 발생하지 않습니다.
대신 child element에 대해서는 scroll chain이 발생합니다.

none

No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

child Element에도 scroll chain이 발생하지 않습니다.

Example (contain과 none 비교)

아래 예제를 통해서 contain과 none을 비교해볼 수 있습니다.
(예제링크)

outer의 child(inner)가 있는 경우

첫번째 예제에서는 inner에 none을 붙였습니다. inner box의 스크롤이 끝나도 outer의 스크롤은 발생하지 않습니다.

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은 같은 레벨 element의 scroll을 막습니다.)
또는 none도 사용할 수 있습니다.

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;
}