CSS scroll-padding 속성

정의와 사용법

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

이는 스크롤을 멈추면, 스크롤이 빠르게 조정되어 컨테이너에서 자식 요소 부착 위치까지의 지정된 거리에 멈추는 것을 의미합니다.

부착 위치는 자식 요소가 스크롤을 멈추면, 그것이 컨테이너 내에서 고정된 위치를 의미합니다.

scroll-padding 속성은 다음 속성의 줄임말 속성입니다:

• scroll-padding-top
• scroll-padding-bottom
• scroll-padding-left
• scroll-padding-right

scroll-padding 속성의 값은 다양한 방식으로 설정할 수 있습니다:

scroll-padding 속성이 네 값을 가지면:

scroll-padding: 15px 30px 60px 90px;

• 상단 간격은 15px입니다
• 우측 간격은 30px입니다
• 하단 간격은 60px입니다
• 좌측 간격은 90px입니다

scroll-padding 속성이 세 값을 가지면:

scroll-padding: 15px 30px 60px;

• 상단 간격은 15px입니다
• 左侧和右侧距离为 30px
• 하단 간격은 60px입니다

scroll-padding 속성이 두 값을 가지면:

scroll-padding: 15px 30px;

• 상단과 하단 간격은 15px입니다
• 左侧和右侧距离为 30px

左侧和右侧距离为 30px

如果 scroll-padding 속성有一个值：

• scroll-padding: 10px;

所有四个方向的距离均为 10px scroll-padding 要看到 scroll-snap-align 속성的效果，必须在子元素上设置 scroll-padding 속성，并在父元素上设置 scroll-snap-type 속성。

注意：下面的例子中，为所有边设置了滚动内边距，但由于 scroll-snap-align 设置为 "start"，因此只有顶部边的滚动内边距改变了滚动行为。

예제

예제 1

컨테이너에서 부착 위치까지의 스크롤 내밀거리를 20px로 설정합니다:

div {
  scroll-padding: 20px;
}

직접 시험해 보세요

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

scroll-padding 속성은 부착 행동을 가진 이미지 갤러리에서 사용할 수 있습니다. 이미지를 고정 요소 아래로 밀어넣습니다:

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

고정된 상단 요소

직접 시험해 보세요

예제 3: 아래와 오른쪽의 스크롤 내밀거리 설정

scroll-padding 속성은 블록의 아래와 오른쪽에 동시에 설정할 수 있습니다. 수평과 수직으로 다음 요소로 스크롤하여 효과를 확인하세요:

#container {
  scroll-padding: 0 10px 30px 0;
}

직접 시험해 보세요

CSS 문법

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

속성 값

기술 세부 사항

浏览器支持

표中的数字表示首个完全支持该属性的浏览器版本。

관련 페이지

참조:CSS scroll-padding-bottom 속성

참조:CSS scroll-padding-left 속성

참조:CSS scroll-padding-right 속성

참조:CSS scroll-padding-top 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성