scroll-padding
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
시도해보기
scroll-padding-*
속성은 스크롤 포트의 최적화된 가시 영역에 대한 오프셋을 설정합니다. 이 영역은 사용자의 시야에 요소를 위치시키기 위한 타겟 영역으로 사용됩니다. 이는 작성자는 다른 콘텐츠 (위치가 고정된 툴바 혹은 사이드바 등)에 가려진 스크롤 포트의 영역을 제외하거나 타겟 요소와 스크롤 포트 가장자리 사이에 더 많은 여백을 둘 수 있습니다.
구성 속성
이 속성은 다음 CSS 속성의 단축 속성입니다.
구문
/* 키워드 값 */
scroll-padding: auto;
/* <length> 값 */
scroll-padding: 10px;
scroll-padding: 1em 0.5em 1em 1em;
scroll-padding: 10%;
/* 전역 값 */
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: revert;
scroll-padding: revert-layer;
scroll-padding: unset;
값
<length-percentage>
-
유효한
<length>
혹은<percentage>
값인 스크롤 포트의 가장자리로부터 상응하는 안쪽 간격입니다. auto
-
사용자 에이전트로부터 설정된 오프셋 값입니다. 이 값은 일반적으로
0px
이지만, 0이 아닌 값이 더 적합하다고 판단될 경우 사용자 에이전트가 이를 자유롭게 감지하고 다른 값을 사용할 수 있습니다.
형식 정의
초기값 | as each of the properties of the shorthand:
|
---|---|
적용대상 | scroll containers |
상속 | no |
Percentages | relative to the scroll container's scrollport |
계산 값 | as each of the properties of the shorthand:
|
Animation type | by computed value type |
형식 구문
명세서
Specification |
---|
CSS Scroll Snap Module Level 1 # scroll-padding |
브라우저 호환성
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll-padding | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.