CSS scroll-padding-top 속성

정의와 사용법

scroll-padding-top 속성은 컨테이너의 상단에서 자식 요소의 고정 위치까지의 거리를 지정합니다.

스크롤을 멈추면 자식 요소가 컨테이너 안에 고정된 위치를 의미합니다.

吸附 위치는}} scroll-snap-align 속성 설정, 그리고도 CSS 속성 direction 및 writing-mode 의 영향을 받을 수 있습니다.

주의:이 속성은 자식 요소의 상단에吸附 위치가 설정되었을 때만 유효합니다.

를 볼 수 있습니다. scroll-padding-top 속성의 효과를 설정하려면, 자식 요소에 scroll-snap-align 속성, 부모 요소에 scroll-padding-top 및 scroll-snap-type 속성.

예제

예제 1

스크롤 내간지를 컨테이너 상단에서吸附 위치까지 20px로 설정합니다:

div {
  scroll-padding-top: 20px;
}

직접 시험해 보세요

예제 2: 이미지 라이브러리

scroll-padding-top 속성은吸附 행동을 가진 이미지 갤러리에 사용될 수 있으며, 이미지를 고정 요소 아래로 밀어넣을 수 있습니다:

#container {
  scroll-padding-top: 30px;
}

직접 시험해 보세요

예제 3: 상단에滚动 내간지 설정

두 방향 모두吸附 행동이 설정되었을 때, 컨테이너에도 scroll-padding-top 속성. 다음 요소로垂直로 스크롤하여 효과를 확인하세요:

#container {
  scroll-padding-top: 30px;
}

직접 시험해 보세요

예제 4:吸附 위치

이를 통해 scroll-padding-top 속성이 적용되며,吸附 위치는 자식 요소의 상단에 설정되어야 합니다. 이 예제에서는,writing-mode 속성이 자식 요소의 상단에서 오른쪽으로 위치를吸附합니다. 이러한 코드를 사용할 때,scroll-padding-top 속성이 더 이상 작동하지 않습니다:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

직접 시험해 보세요

CSS 문법

scroll-padding-top: auto|value|initial|inherit;

속성 값

값 설명
auto 기본 값. 브라우저가 내간지를 계산합니다.
length

px, pt, cm 등의 단위로 scroll-padding-top을 지정합니다.

부정적인 값을 사용할 수 없습니다. 참조:CSS 단위.
% 요소의 너비를 기준으로 百分比로 내간지를 지정합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit 이 속성을 부모 요소에서 상속합니다. 참조: inherit.

기술 세부 사항

기본 값: auto
상속성: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.scrollPaddingTop="20px"

브라우저 지원

표格에 표시된 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
69.0 79.0 68.0 14.1 56.0

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰러짐 모드 속성