CSS overscroll-behavior-x 속성

정의와 사용법

overscroll-behavior-x 속성은 x 방향에서 스크롤 경계를 벗어나려고 시도할 때 요소의 스크롤 체인이나 과도한 스크롤 피드백을 종료합니다.

주의:x 방향에서 overscroll-behavior를 트리거하려면 터치 패드나 터치 스크린에서 스와이프手势를 사용할 수 있습니다.

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

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

x 방향에서 스크롤 가능한 <div> 요소의 스크롤 체인을 종료합니다:

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

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

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

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

표中的 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome	Edge	Firefox	Safari	Opera
63.0	18.0 *	59.0	16.0	50.0

* Microsoft Edge에서는 속성 값 none이 contain으로 간주됩니다. 이는 정확하지 않습니다.