scroll-margin

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, và scroll-ml-<number> như scroll-ml-4 và scroll-mt-6 để thiết lập scroll offset xung quanh các mục bên trong một snap container:

Cuộn trong lưới hình ảnh để xem hành vi mong đợi

<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>

Sử dụng giá trị âm

Để sử dụng giá trị scroll margin âm, thêm tiền tố dấu gạch ngang vào tên class để chuyển đổi nó thành giá trị âm:

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

Sử dụng các thuộc tính logic

Sử dụng các tiện ích scroll-ms-<number> và scroll-me-<number> để thiết lập các thuộc tính logic scroll-margin-inline-start và scroll-margin-inline-end, ánh xạ tới phía bên trái hoặc bên phải dựa trên hướng văn bản:

Cuộn trong lưới hình ảnh để xem hành vi mong đợi

Trái sang phải

Phải sang trái

<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>

Để kiểm soát nhiều hơn, bạn cũng có thể sử dụng các modifier LTR và RTL để áp dụng các style cụ thể tùy thuộc vào hướng văn bản hiện tại.

Sử dụng giá trị tùy chỉnh

Use utilities like scroll-ml-[<value>] and scroll-me-[<value>] to set the scroll margin based on a completely custom value:

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

For CSS variables, you can also use the scroll-ml-(<custom-property>) syntax:

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

This is just a shorthand for scroll-ml-[var(<custom-property>)] that adds the var() function for you automatically.

Thiết kế responsive

Prefix a scroll-margin utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

Tùy chỉnh theme của bạn

The 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> utilities are driven by the --spacing theme variable, which can be customized in your own theme:

@theme {  --spacing: 1px; }

Learn more about customizing the spacing scale in the theme variable documentation.