Thuộc tính scroll-snap-type trong CSS

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

scroll-snap-type Thuộc tính xác định cách thức khi bạn dừng cuộn, phần tử sẽ hấp dẫn vào điểm nhấn và hướng hấp dẫn.

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

Thực例

Ví dụ 1

Đặt chức năng cuộn dính trên trục x:

#container {
  scroll-snap-type: x mandatory;
}

Thử ngay

Ví dụ 2: Đặt hành vi cuộn dính trên trục x và y

Đặt cuộn dính trên trục x và y. scroll-snap-type Thuộc tính:

#container > div {
  scroll-snap-type: both mandatory;
}





Thử ngay

Ví dụ 3: Hành vi dính gần gũi

Cuộn dính có hành vi gần gũi trên trục x và y. scroll-snap-type Thuộc tính. Khi sử dụng giá trị này, nếu thao tác cuộn dừng lại chính xác giữa hai phần tử, thì sẽ không có hiệu ứng dính:

#container > div {
  scroll-snap-type: both proximity;
}





Thử ngay

Cú pháp CSS

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
none Không có hiệu ứng cuộn dính. Giá trị mặc định.
x Đặt hiệu ứng cuộn dính theo trục x.
y Đặt hiệu ứng cuộn dính theo trục y.
block Đặt hiệu ứng cuộn dính theo hướng khối.
inline Đặt hiệu ứng cuộn dính theo hướng nội.
both Đặt hiệu ứng cuộn dính trên trục x và y.
mandatory Sau khi thao tác cuộn hoàn thành, cuộn sẽ tự động di chuyển đến điểm dính.
proximity

Tương tự mandatory, nhưng khôngStrict.

Sau khi thao tác cuộn hoàn thành, cuộn sẽ tự động di chuyển đến điểm dính, nhưng giữa các điểm dính có một vùng không có hiệu ứng dính.

Tuỳ thuộc vào tham số trình duyệt.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: Không
Chế tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.scrollSnapType="x mandatory"

Hỗ trợ trình duyệt

Bảng số liệu 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.

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

Trang liên quan

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