CSS overscroll-behavior-inline 속성

정의와 사용법

overscroll-behavior-inline 속성은 행내 방향에서 스크롤 경계를 넘어 스크롤을 시도할 때, 요소의 스크롤 체인을 닫거나 과도한 스크롤 피드백을 차단합니다.

주의:행내 방향에서 overscroll-behavior를 트리거하려면, 터치패드나 터치스크린에서 슬라이딩手势를 사용해야 할 수 있습니다.

滚动链是指在一个元素上过度滚动会导致父元素的滚动行为。这是默认行为。

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

과도한 스크롤 피드백은 사용자가 스크롤 경계를 넘어서려고 시도할 때 제공되는 피드백입니다. 예를 들어, 모바일 장치에서 페이지 상단을 넘어 스크롤하려고 시도할 때, 일반적으로 페이지 새로고침의 시각적 피드백이 동반됩니다. overscroll-behavior-inline 와 overscroll-behavior-block 속성은 CSS의 overscroll-behavior-x 와 overscroll-behavior-y 속성은 매우 유사하지만 overscroll-behavior-inline 와 overscroll-behavior-block 속성은 블록 방향과 행내 방향에 따라 달라집니다.

주의:관련 CSS 속성 writing-mode 행내 방향을 정의합니다. 이는 행내 방향이 x 축이거나 y 축인지, 또한 overscroll-behavior-inline 속성 결과. 영어 페이지에서는 행내 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

사례

예제 1

행내 방향에서 스크롤할 수 있는 <div> 요소의 스크롤 체인을 닫습니다:

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

직접 시도해 보세요

예제 2: writing-mode 속성과 결합

<div> 요소의 writing-mode 속성 값을 'vertical-rl'로 설정하면 내부 방향이 y 축으로 변하므로 overscroll-behavior-inline 지금은 y 축에서 작동하며 x 축에서는 아닙니다:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-inline: contain;
}

직접 시도해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

표에 나타난 숫자는 이 특성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

相关页面

참조:CSS overscroll-behavior 속성

참조:CSS overscroll-behavior-block 속성

참조:CSS overscroll-behavior-x 속성

참조:CSS overscroll-behavior-y 속성

참조:CSS scroll-behavior 속성

참조:CSS scroll-margin 속성

참조:CSS scroll-padding 속성

참조:CSS scroll-snap-align 속성

참조:CSS 라이팅-모드 속성