Thuộc tính scroll-snap-stop của CSS

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

Khi trượt nhanh trên bảng cảm ứng hoặc màn hình chạmscroll-snap-stop thuộc tính được sử dụng để xác định cuộn là nhảy qua phần tử hay dừng lại và giữ nguyên phần tử tiếp theo.

Để kiểm soát hành vi dừng cuộn吸附, bạn phải đặt thuộc tính trên phần tử con scroll-snap-stop và scroll-snap-align thuộc tính, đồng thời đặt scroll-snap-type thuộc tính.

Lưu ý: Bạn cần sử dụng cử chỉ trượt trên thiết bị có bảng cảm ứng hoặc màn hình chạm để trải nghiệm scroll-snap-stop Hiệu ứng của thuộc tính.

Mô hình

Khi trượt nhanh trên bảng cảm ứng hoặc màn hình chạm, buộc cuộn dừng lại và giữ nguyên phần tử tiếp theo, thay vì nhảy qua phần tử:

div {
  scroll-snap-stop: always;
}

Thử ngay

Ngữ pháp CSS

scroll-snap-stop: normal|always|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
normal Giá trị mặc định. Sau khi trượt nhanh trên bảng cảm ứng hoặc màn hình chạm, cuộn sẽ giảm tốc chậm và nhảy qua nhiều phần tử.
always Sau khi trượt nhanh trên bảng cảm ứng hoặc màn hình chạm, cuộn sẽ dừng lại và giữ nguyên phần tử tiếp theo ở vị trí tập trung.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Tính thuộc tính này được kế thừa từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: normal
Kế thừa: Không
Chế tạo animation: Không hỗ trợ. Xem thêm:Tính thuộc tính liên quan đến animation.
Phiên bản: CSS3
Ngữ pháp JavaScript: object.style.scrollSnapStop="always"

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ợ tính thuộc tính này.

Chrome Edge Firefox Safari Opera
75.0 79.0 103.0 15.0 62.0

Trang liên quan

Tham khảo：Thuộc tính scroll-snap-align của CSS

Tham khảo：Thuộc tính scroll-snap-type của CSS