Thuộc tính scroll-snap-align CSS

Định nghĩa và cách sử dụng

scroll-snap-align Thuộc tính xác định vị trí điểm nhấn mà phần tử sẽ dính khi bạn dừng cuộn.

Để thực hiện hành vi dính滚动, bạn phải đặt thuộc tính trên phần tử con scroll-snap-align thuộc tính, và đặt trên phần tử cha scroll-snap-type Thuộc tính.}}

Mẫu

Ví dụ 1

Khi người dùng dừng cuộn, để phần tử gần nhất dính vào vị trí giữa:

div {
  scroll-snap-align: center;
}

Thử ngay

Ví dụ 2: Thư viện hình ảnh

scroll-snap-align Thuộc tính này rất phù hợp để sử dụng trong thư viện hình ảnh cuộn. Ở đây, hướng cuộn là ngang, cách dính đối齐 là giữa. Khi người dùng thả thanh cuộn, hình ảnh gần nhất sẽ dính vào vị trí giữa của vùng cuộn. Thử nhấp vào một hình ảnh, sau đó sử dụng phím mũi tên trái và phải để cuộn qua chúng:

#container > img {
  scroll-snap-align: none center;
}

Thử ngay

Ví dụ 3: Đối齐 vị trí dính khi cuộn theo hướng block

Khi cuộn theo hướng dọc,scroll-snap-align Thuộc tính này cũng có thể được thiết lập làm vị trí bắt đầu của phần tử trên hướng block:

#container > div {
  scroll-snap-align: start none;
}

Thử ngay

Cú pháp CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Trang liên quan

Tham khảo:Thuộc tính scroll-snap-type CSS