CSS overscroll-behavior-block 속성
- 이전 페이지 overscroll-behavior
- 다음 페이지 overscroll-behavior-inline
정의와 사용법
overscroll-behavior-block 블록 방향으로 스크롤을 범위를 벗어났을 때 요소에 스크롤 링크(스크롤 체인링) 또는 과도한 스크롤 피드백(오버스크롤 피드백)을 차단하는 속성입니다.
滚动链是指在一个元素上过度滚动会导致父元素的滚动行为。这是默认行为。
스크롤 라인은 하나의 요소에서 과도한 스크롤이 발생하면 부모 요소의 스크롤 동작이 발생하는 것을 의미합니다. 이는 기본 동작입니다.
과도한 스크롤 피드백은 사용자가 스크롤 경계를 넘어스러들 때 제공되는 피드백입니다. 예를 들어, 모바일 장치에서 페이지 상단을 넘어스러들 때, 일반적으로 페이지 새로 고침의 시각적 피드백이 동반됩니다. overscroll-behavior-block 와 overscroll-behavior-inline 속성은 CSS의 overscroll-behavior-x 와 overscroll-behavior-y 속성은 매우 유사하지만 overscroll-behavior-block 와 overscroll-behavior-inline 속성은 블록 방향과 행 내 방향에 따라 의존합니다.
주의:관련 CSS 속성 writing-mode 블록 방향을 정의합니다. 이는 블록 방향이 x 방향이거나 y 방향이 되는지, 그리고 overscroll-behavior-block 속성의 결과는 영어 페이지에서는 블록 방향이 내려가고, 행 내 방향이 왼쪽에서 오른쪽으로 이동합니다.
예제
예제 1
블록 방향에서 스크롤 가능한 <div> 요소의 스크롤 라인을 닫습니다:
#yellowDiv {
overscroll-behavior-block: contain;
}
예제 2: writing-mode 속성과 결합
<div> 요소의 writing-mode 속성 값을 'vertical-rl'로 설정하면 블록 방향이 x 방향으로 변하므로 overscroll-behavior-block 지금은 y 방향 대신 x 방향에서 작동합니다:
#yellowDiv {
writing-mode: vertical-rl;
overscroll-behavior-block: contain;
}
CSS 문법
overscroll-behavior-block: auto|contain|none|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| auto | 스크롤 라인과 과도한 스크롤 피드백 동작을 허용합니다. 기본 값. |
| contain | 과도한 스크롤 피드백 동작을 허용하지만 스크롤 라인을 허용하지 않습니다. |
| none | 과도한 스크롤 피드백이나 스크롤 라인 동작을 허용하지 않습니다. |
| initial | 이 속성을 기본 값으로 설정합니다. 참조: initial。 |
| inherit | 부모 요소에서 이 속성을 상속합니다. 참조: inherit。 |
기술 세부 사항
| 기본 값: | auto |
|---|---|
| 상속성: | 아니요 |
| 애니메이션 제작: | 지원하지 않습니다. 참조:애니메이션 관련 속성。 |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.overscrollBehaviorBlock="none" |
브라우저 지원
표에서의 숫자는 이 속성을 최초로 완벽하게 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 63.0 | 18.0 | 59.0 | 16.0 | 50.0 |
관련 페이지
참조:CSS overscroll-behavior-inline 속성
참조:CSS overscroll-behavior-x 속성
- 이전 페이지 overscroll-behavior
- 다음 페이지 overscroll-behavior-inline
