CSS scroll-padding-right 속성

정의와 사용법

scroll-padding-right 속성이 캔버스의 우측에서 자식 요소의吸附位置까지의 거리를 지정합니다.

吸附位置是指在停止滚动时，子元素在容器中吸附到位的位置。

吸附位置由 scroll-snap-align 속성 설정을 설정할 수 있지만, CSS 속성에도 영향을 받을 수 있습니다. direction 및 writing-mode 의 영향.

주의:此属性仅在吸附位置设置在子元素右侧时有效。

이 속성은 자식 요소에吸附位置设置在右侧时才有效。 scroll-padding-right 속성의 효과를 보려면, scroll-snap-align 속성을 부모 요소에 설정하고, scroll-padding-right 및 scroll-snap-type 속성。

实例

예제 1

滚动内边距设置为从容器右侧到吸附位置的距离为 20px：

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

직접 시도해 보세요

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

scroll-padding-right 속성은吸附行为的图片画廊에서 사용할 수 있으며，이미지를 고정 요소 뒤에서 추입 시키기 위해 사용됩니다：

#container > img {
  scroll-padding-right: 30px;
}

직접 시도해 보세요

예제 3:右侧设置滚动内边距

当在两个方向上都设置了吸附行为时，也可以在容器上设置 scroll-padding-right 속성. 다음 요소로的水平滚动以查看效果：

#container > div {
  scroll-padding-right: 30px;
}

직접 시도해 보세요

예제 4:吸附位置

를 사용하려면 scroll-padding-right 속성이 유효하며,吸附位置必须设置在子元素的右侧。在此示例中，direction 속성의 값 'rtl'은 위치를 자식 요소의 오른쪽에서 왼쪽으로 변경합니다. 이러한 코드를 사용할 때,scroll-padding-right 속성이 더 이상 작동하지 않습니다:

#container {
  direction: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

직접 시도해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 쓰러잉-모드 속성