Thuộc tính kiểu cuộn CSS
Ví dụ
Đặt chức năng chụp nhanh cuộn trên trục x.
#container {
scroll-snap-type: x mandatory;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Kiểu scroll-snap-type
chỉ định cách các phần tử sẽ được lấy nét khi bạn ngừng cuộn và theo hướng nào.
Để đạt được hành vi cuộn nhanh, thuộc tính scroll-snap-type
phải được đặt trên phần tử cha và thuộc tính scroll-snap-align
phải được đặt trên các phần tử con.
Giá trị mặc định: | không có |
---|---|
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.scrollSnapType="x bắt buộc" 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-type | 69.0 | 79.0 | 99.0 | 11.0 | 56.0 |
Cú pháp CSS
scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
none | No scroll snap effect. This is default |
x | Scroll snap effect is set on x-axis |
y | Scroll snap effect is set on y-axis |
block | Scroll snap effect is set on block direction |
inline | Scroll snap effect is set on inline direction |
both | Scroll snap effect is set on both x- and y-axis |
mandatory | Scroll will automatically move to snap point after scroll action is finished |
proximity | Similar to mandatory, but not as strict. Scroll will automatically move to snap point after scroll action is finished, but inbetween snap points there is an area without the snap effect. Depends on browser parameters. |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Chụp hành vi theo cả hai hướng
Thuộc tính scroll-snap-type
được đặt trên cả trục x và trục y:
#container > div {
scroll-snap-type: both mandatory;
}
Chụp hành vi với khoảng cách gần
Thuộc tính scroll-snap-type
được đặt trên cả trục x và trục y với hành vi lân cận. Với giá trị thuộc tính này, nếu hành động cuộn dừng ngay giữa hai phần tử thì không có snap:
#container > div {
scroll-snap-type: both proximity;
}
Trang liên quan
Thuộc tính CSS cuộn-snap-align: Thuộc tính CSS Scroll-snap-align