CSS scroll-padding-left 속성

정의와 사용법

scroll-padding-left 속성은 컨테이너의 왼쪽에서 부자요소의吸附位置까지의 거리를 지정합니다.

吸附位置은 스크롤을 멈춘 상태에서 부자요소가 컨테이너에吸附到位된 위치를 의미합니다.

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

주의:이 속성은 부자요소의 왼쪽에吸附位置이 설정되었을 때만 유효합니다.

보기 scroll-padding-left 속성의 효과를 설정하려면, 자식 요소에도 설정해야 합니다. scroll-snap-align 속성, 그리고 부모 요소에 scroll-padding-left 속성, scroll-snap-type 속성.

예제

예제 1

스크롤 내간격을 컨테이너 왼쪽에서 흡착 위치까지 20px로 설정합니다:

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

직접 테스트해 보세요

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

scroll-padding-left 속성은 흡착 동작을 가진 이미지 갤러리에서 사용하여 이미지를 고정 요소 뒤에서 표시할 수 있습니다:

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

직접 테스트해 보세요

예제 3: 왼쪽에 스크롤 내간격 설정

두 방향 모두 흡착 동작이 설정되었을 때, 컨테이너에도 설정할 수 있습니다. scroll-padding-left 속성. 다음 요소로 수평 스크롤하여 효과를 확인하세요:

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

직접 테스트해 보세요

예제 4: 흡착 위치

하려면 scroll-padding-left 속성이 적용되면, 흡착 위치는 부속 요소의 왼쪽에 설정되어야 합니다. 이 예제에서는,direction 속성의 값 'rtl'은 부속 요소의 왼쪽에서 오른쪽으로 위치를 흡착합니다. 이러한 코드를 사용할 때,scroll-padding-left 속성이 더 이상 작동하지 않습니다:

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

직접 테스트해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 방향 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성

참조:CSS 워팅-모드 속성