Thuộc tính cuộn-snap-stop CSS
Ví dụ
Thay vì cuộn qua các phần tử khi vuốt nhanh trên bàn di chuột hoặc màn hình cảm ứng, hãy buộc cuộn để dừng và chụp vào phần tử tiếp theo:
div {
scroll-snap-stop: always;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Khi vuốt nhanh trên bàn di chuột hoặc màn hình cảm ứng, thuộc tính scroll-snap-stop
chỉ định cuộn qua các phần tử hay dừng và chạm vào phần tử tiếp theo.
Để kiểm soát hành vi dừng chụp nhanh cuộn, các thuộc tính scroll-snap-stop
và scroll-snap-align
phải được đặt trên các phần tử con và thuộc tính scroll-snap-type
phải được đặt trên phần tử cha.
Lưu ý: Bạn phải sử dụng cử chỉ vuốt trên thiết bị có bàn di chuột hoặc màn hình cảm ứng để trải nghiệm hiệu ứng của thuộc tính scroll-snap-stop
.
Giá trị mặc định: | Bình thường |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.scrollSnapStop="always" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
scroll-snap-stop | 75.0 | 79.0 | 103.0 | 15.0 | 62.0 |
Cú pháp CSS
scroll-snap-stop: normal|always|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
normal | Default value. After fast swipe with touchpad or touch screen, the scrolling slows down slowly and passes several elements. |
always | After fast swipe with touchpad or touch screen, scrolling stops and the next element snaps into focus. |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Thuộc tính CSS cuộn-snap-align: Thuộc tính CSS Scroll-snap-align
Thuộc tính CSS cuộn-snap-type: Thuộc tính CSS Scroll-snap-type