Thuộc tính cuộn-snap-align CSS
Ví dụ
Đặt phần tử gần nhất vào giữa khi người dùng ngừng cuộn:
div {
scroll-snap-align: center;
}
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
Thuộc tính scroll-snap-align
chỉ định vị trí các phần tử sẽ được lấy nét khi bạn ngừng cuộn.
Để đạt được hành vi cuộn nhanh, thuộc tính 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.
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.scrollSnapAlign="start" Hãy 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-align | 69.0 | 79.0 | 68.0 | 11.0 | 56.0 |
Cú pháp CSS
scroll-snap-align: none|start|end|center| block inline |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
none | No scroll snap effect. This is default |
start | Scroll snap at start of elements on x- and y-axis. |
end | Scroll snap at end of elements on x- and y-axis. |
center | Scroll snap at center of elements on x- and y-axis. |
block inline | Two value syntax. First value is how to snap in block direction, and second value is how to snap in the inline direction. |
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ụ
Thư viện hình ảnh
Thuộc tính scroll-snap-align
rất phù hợp để cuộn qua thư viện hình ảnh. Ở đây, hướng cuộn là ngang và căn chỉnh nhanh là giữa. Khi người dùng buông thanh cuộn, hình ảnh gần nhất sẽ xuất hiện ở giữa vùng có thể cuộn. Hãy thử nhấp vào một hình ảnh, sau đó sử dụng phím mũi tên phải hoặc trái để cuộn qua chúng:
#container > img {
scroll-snap-align: none center;
}
Hãy tự mình thử »Căn chỉnh snap ở đầu phần tử, theo chiều dọc
Thuộc tính scroll-snap-align
cũng có thể được đặt ở đầu các phần tử theo hướng khối khi cuộn theo chiều dọc:
#container > div {
scroll-snap-align: start none;
}
Trang liên quan
Thuộc tính CSS cuộn-snap-type: Thuộc tính CSS Scroll-snap-type