CSS overscroll-behavior-y 속성

정의와 사용법

overscroll-behavior-y 속성은 y 방향으로 스크롤 경계를 벗어나려고 시도할 때 요소의 스크롤 라인을 닫거나 과도한 스크롤 피드백을 허용합니다.

스크롤 라인은 요소에서 과도한 스크롤이 부모 요소의 스크롤 동작을 유발한다는 것을 의미합니다. 이는 기본 동작입니다.

과도한 스크롤피드백은 사용자가 스크롤 경계를 벗어나려고 시도할 때 제공되는 피드백입니다. 예를 들어, 모바일 장치에서 페이지 상단을 벗어나려고 스크롤을 시도할 때, 일반적으로 페이지 리프레시와 함께 시각적 피드백이 동반됩니다.

스크롤 가능한 <div> 요소의 스크롤 라인을 닫습니다:

#yellowDiv {
  overscroll-behavior-y: contain;
}

overscroll-behavior-y: auto|contain|none|initial|inherit;

값	설명
auto	스크롤 라인과 과도한 스크롤 피드백 동작을 허용합니다. 기본 값.
contain	과도한 스크롤 피드백 동작을 허용하지만 스크롤 라인을 허용하지 않습니다.
none	과도한 스크롤 피드백이나 스크롤 라인 동작을 허용하지 않습니다.
initial	이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit	부모 요소에서 이 속성을 상속합니다. 참조: inherit。

기본 값:	auto
상속성:	아니요
애니메이션 제작:	지원하지 않습니다. 참조:애니메이션 관련 속성。
버전:	CSS3
JavaScript 문법:	object.style.overscrollBehaviorY="none"

표에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

Chrome	Edge	Firefox	Safari	Opera
63.0	18.0 *	59.0	16.0	50.0

* Microsoft Edge에서는 속성 값 none이 contain으로 처리됩니다. 이는 올바르지 않습니다.