scroll-snap-align

Các tiện ích để kiểm soát căn chỉnh scroll snap của một phần tử.

ClassStyles
snap-start
scroll-snap-align: start;
snap-end
scroll-snap-align: end;
snap-center
scroll-snap-align: center;
snap-align-none
scroll-snap-align: none;

Ví dụ

Snap vào giữa

Sử dụng tiện ích snap-center để snap một phần tử vào giữa của nó khi được cuộn bên trong một snap container:

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

snap point
<div class="snap-x ...">  <div class="snap-center ...">    <img src="/img/vacation-01.jpg" />  </div>  <div class="snap-center ...">    <img src="/img/vacation-02.jpg" />  </div>  <div class="snap-center ...">    <img src="/img/vacation-03.jpg" />  </div>  <div class="snap-center ...">    <img src="/img/vacation-04.jpg" />  </div>  <div class="snap-center ...">    <img src="/img/vacation-05.jpg" />  </div>  <div class="snap-center ...">    <img src="/img/vacation-06.jpg" />  </div></div>

Snap vào đầu

Sử dụng tiện ích snap-start để snap một phần tử vào đầu của nó khi được cuộn bên trong một snap container:

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

snap point
<div class="snap-x ...">  <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 class="snap-start ...">    <img src="/img/vacation-06.jpg" />  </div></div>

Snap vào cuối

Sử dụng tiện ích snap-end để snap một phần tử vào cuối của nó khi được cuộn bên trong một snap container:

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

snap point
<div class="snap-x ...">  <div class="snap-end ...">    <img src="/img/vacation-01.jpg" />  </div>  <div class="snap-end ...">    <img src="/img/vacation-02.jpg" />  </div>  <div class="snap-end ...">    <img src="/img/vacation-03.jpg" />  </div>  <div class="snap-end ...">    <img src="/img/vacation-04.jpg" />  </div>  <div class="snap-end ...">    <img src="/img/vacation-05.jpg" />  </div>  <div class="snap-end ...">    <img src="/img/vacation-06.jpg" />  </div></div>

Thiết kế responsive

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

<div class="snap-center md:snap-start ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Chính sách thương hiệu