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 단축 속성padding 속성이 요소의 안쪽 여백을 설정하는 것처럼, 요소의 모든 측면에서의 스크롤 안쪽 여백을 한번에 정의합니다.

시도해보기

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
Percentagesrelative to the scroll container's scrollport
계산 값as each of the properties of the shorthand:
Animation typeby computed value type

형식 구문

scroll-padding = 
[ auto | <length-percentage [0,∞]> ]{1,4}

<length-percentage> =
<length> |
<percentage>

명세서

Specification
CSS Scroll Snap Module Level 1
# scroll-padding

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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.

같이 보기