scroll-margin

예제

기본 예제

scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, scroll-ml-<number> 유틸리티를 사용해 스냅 컨테이너 내부 아이템 주변의 스크롤 오프셋을 설정할 수 있습니다. 예를 들어 scroll-ml-4와 scroll-mt-6 같은 유틸리티를 사용할 수 있습니다.

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

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

음수 값 사용하기

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

<div class="snap-start -scroll-ml-6 ...">  <!-- ... --></div>

논리적 속성 사용하기

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

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

왼쪽에서 오른쪽으로

오른쪽에서 왼쪽으로

<div dir="ltr">  <div class="snap-x ...">    <div class="snap-start scroll-ms-6 ...">      <img src="/img/vacation-01.jpg"/>    </div>    <!-- ... -->  </div></div><div dir="rtl">  <div class="snap-x ...">    <div class="snap-start scroll-ms-6 ...">      <img src="/img/vacation-01.jpg"/>    </div>    <!-- ... -->  </div></div>

더 세밀한 제어를 위해 LTR 및 RTL 수정자를 사용하여 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수도 있습니다.

커스텀 값 사용하기

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

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

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

<div class="scroll-ml-(--my-scroll-margin) ...">  <!-- ... --></div>

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

반응형 디자인

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

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

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

테마 커스터마이징

scroll-m-<number>,scroll-mx-<number>,scroll-my-<number>,scroll-ms-<number>,scroll-me-<number>,scroll-mt-<number>,scroll-mr-<number>,scroll-mb-<number>, and scroll-ml-<number> 유틸리티는 --spacing 테마 변수에 의해 결정되며, 이 변수는 여러분의 테마에서 커스텀할 수 있습니다:

@theme {  --spacing: 1px; }

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