scroll-padding

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number>, và scroll-pl-<number> như scroll-pl-4 và scroll-pt-6 để thiết lập scroll offset của một phần tử 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 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>

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

Sử dụng các tiện ích scroll-ps-<number> và scroll-pe-<number> để thiết lập các thuộc tính logic scroll-padding-inline-start và scroll-padding-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 scroll-ps-6 ...">    <!-- ... -->  </div></div><div dir="rtl">  <div class="snap-x scroll-ps-6 ...">    <!-- ... -->  </div></div>

Sử dụng giá trị âm

Để sử dụng giá trị scroll padding â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="-scroll-ps-6 snap-x ...">  <!-- ... --></div>

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

Use utilities like scroll-pl-[<value>] and scroll-pe-[<value>] to set the scroll padding based on a completely custom value:

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

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

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

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

Thiết kế responsive

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

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

Learn more about using variants in the variants documentation.

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

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