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 2021년 4월.
scroll-padding 단축 속성은 padding 속성이 요소의 안쪽 여백을 설정하는 것처럼, 요소의 모든 측면에서의 스크롤 안쪽 여백을 한번에 정의합니다.
시도해 보기
scroll-padding: 0; scroll-padding: 20px; scroll-padding: 2em; <section class="default-example" id="default-example"> <div class="scroller" id="example-element"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="info">Scroll »</div> </section> .default-example .info { inline-size: 100%; padding: 0.5em 0; font-size: 90%; writing-mode: vertical-rl; } .scroller { text-align: left; height: 250px; width: 270px; overflow-y: scroll; display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid black; scroll-snap-type: y mandatory; } .scroller > div { flex: 0 0 250px; background-color: rebeccapurple; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(even) { background-color: #fff; color: rebeccapurple; } scroll-padding-* 속성은 스크롤 포트의 최적화된 가시 영역에 대한 오프셋을 설정합니다. 이 영역은 사용자의 시야에 요소를 위치시키기 위한 타겟 영역으로 사용됩니다. 이는 작성자는 다른 콘텐츠 (위치가 고정된 툴바 혹은 사이드바 등)에 가려진 스크롤 포트의 영역을 제외하거나 타겟 요소와 스크롤 포트 가장자리 사이에 더 많은 여백을 둘 수 있습니다.
구성 속성
이 속성은 다음 CSS 속성의 단축 속성입니다.
구문
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 |
형식 구문
scroll-padding =
[ auto | <length-percentage [0,∞]> ]{1,4}
<length-percentage> =
<length> |
<percentage>
명세서
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |