scroll-padding

예제

기본 예제

scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number>, scroll-pl-<number> 유틸리티를 사용해 스냅 컨테이너 내 엘리먼트의 스크롤 오프셋을 설정할 수 있습니다. 예를 들어 scroll-pl-4나 scroll-pt-6와 같이 사용합니다.

이미지 그리드에서 스크롤을 해보면 예상된 동작을 확인할 수 있습니다

<div class="snap-x scroll-pl-6 ...">  <div class="snap-start ...">    <img src="/img/vacation-01.jpg" />  </div>  <div class="snap-start ...">    <img src="/img/vacation-02.jpg" />  </div>  <div class="snap-start ...">    <img src="/img/vacation-03.jpg" />  </div>  <div class="snap-start ...">    <img src="/img/vacation-04.jpg" />  </div>  <div class="snap-start ...">    <img src="/img/vacation-05.jpg" />  </div></div>

논리적 속성 사용하기

scroll-ps-<number>와 scroll-pe-<number> 유틸리티를 사용하여 scroll-padding-inline-start와 scroll-padding-inline-end 논리적 속성을 설정할 수 있습니다. 이 속성들은 텍스트 방향에 따라 왼쪽 또는 오른쪽에 매핑됩니다.

이미지 그리드에서 스크롤하여 예상된 동작을 확인하세요

왼쪽에서 오른쪽으로

오른쪽에서 왼쪽으로

<div dir="ltr">  <div class="snap-x scroll-ps-6 ...">    <!-- ... -->  </div></div><div dir="rtl">  <div class="snap-x scroll-ps-6 ...">    <!-- ... -->  </div></div>

음수 값 사용하기

스크롤 패딩에 음수 값을 사용하려면 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환합니다:

<div class="-scroll-ps-6 snap-x ...">  <!-- ... --></div>

커스텀 값 사용하기

scroll-pl-[<value>] 그리고 scroll-pe-[<value>]와 같은 유틸리티를 사용하세요 scroll padding를 완전히 커스텀한 값으로 설정하려면:

<div class="scroll-pl-[24rem] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 scroll-pl-(<custom-property>) 구문을 사용할 수도 있습니다:

<div class="scroll-pl-(--my-scroll-padding) ...">  <!-- ... --></div>

이는 scroll-pl-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

반응형 디자인

접두사 a scroll-padding 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="scroll-p-8 md:scroll-p-0 ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스터마이징

scroll-p-<number>,scroll-px-<number>,scroll-py-<number>,scroll-ps-<number>,scroll-pe-<number>,scroll-pt-<number>,scroll-pr-<number>,scroll-pb-<number>, and scroll-pl-<number> 유틸리티는 --spacing 테마 변수에 의해 결정되며, 이 변수는 여러분의 테마에서 커스텀할 수 있습니다:

@theme {  --spacing: 1px; }

스페이싱 스케일 커스터마이징에 대해 더 알아보려면 테마 변수 문서를 참고하세요.