CSS overscroll-behavior 속성
- 이전 페이지 overflow-y
- 다음 페이지 overscroll-behavior-block
定义和用法
overscroll-behavior 属性用于在尝试滚动超出滚动边界时，关闭元素的滚动链（scroll chaining）或过度滚动反馈（overscroll affordance）。
滚动链：当在一个元素上过度滚动时，会导致父元素的滚动行为。这是默认行为。
过度滚动反馈：当尝试滚动超出滚动边界时，向用户提供的反馈。例如，在移动设备上尝试滚动超出页面顶部时，通常会显示视觉反馈并刷新页面。
overscroll-behavior 속성은 다음 속성의 요약 형식입니다:
overscroll-behavior 속성 값은 다음과 같은 방식으로 설정할 수 있습니다:
overscroll-behavior 속성 값이 두 개인 경우:
overscroll-behavior: none contain;
- x 방향: 과도한 스크롤 행동이 없습니다
- y 방향: 스크롤 라인이 없지만 과도한 스크롤 피드백을 허용합니다
overscroll-behavior 속성 값이 하나인 경우:
overscroll-behavior: contain;
- x와 y 방향: 스크롤 라인이 없지만 과도한 스크롤 피드백을 허용합니다
예제
예제 1
스크롤 가능한 <div> 요소의 스크롤 라인을 종료합니다:
#yellowDiv {
overscroll-behavior: contain;
}
예제 2: 양자 문법:
다음과 같은 예제: overscroll-behavior 속성 값을 설정합니다: auto nonex 방향의 스크롤 라인과 과도한 스크롤 피드백을 허용하지만 y 방향은 허용하지 않습니다.:
#pinkDiv {
overscroll-behavior: auto none;
}
CSS 문법
overscroll-behavior: auto|contain|none|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| auto | 스크롤 라인과 과도한 스크롤 피드백 행동을 허용합니다. 기본 값. |
| contain | 과도한 스크롤 피드백 행동을 허용하지만 스크롤 라인을 허용하지 않습니다. |
| none | 과도한 스크롤 피드백이나 스크롤 라인 행동을 허용하지 않습니다. |
| initial | 이 속성을 기본 값으로 설정합니다. 참고: initial. |
| inherit | 부모 요소에서 이 속성을 상속합니다. 참고: inherit. |
기술 세부 사항
| 기본 값: | auto |
|---|---|
| 상속성: | 아니요 |
| 애니메이션 제작: | 지원하지 않습니다. 참고:애니메이션 관련 속성. |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.overscrollBehavior="none" |
브라우저 지원
표中之수는 해당 속성을 최초로 지원하는 브라우저의 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 63.0 | 18.0 * | 59.0 | 16.0 | 50.0 |
* Microsoft Edge에서 'none' 속성 값이 'contain'으로 처리되는 것이 올바르지 않습니다.
관련 페이지
참조:CSS overscroll-behavior-x 속성
- 이전 페이지 overflow-y
- 다음 페이지 overscroll-behavior-block
