Ngày 18 tháng 8 năm 2022
Chỉ báo cuộn xuốngCSS 926 lượt xem
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
2Ảnh chụp màn hình kết quả
HTMLCSSscroll downscroll animation phần tử giả
Tác giả. Geekboots
CSS Scroll Snap là một mô-đun của CSS giới thiệu các vị trí chụp cuộn, thực thi các vị trí cuộn mà cổng cuộn của vùng chứa cuộn có thể kết thúc sau khi thao tác cuộn hoàn tất
Hiểu nôm na,
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
3 cho phép bạn khóa chế độ xem [.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
0] theo các thành phần hoặc vị trí định trước sau khi người dùng cuộn xong. Thật tuyệt vời khi xây dựng các tương tác như thế nàyNhững trình duyệt nào hỗ trợ chụp nhanh cuộn
Theo như caniuse, khá nhiều trình duyệt được hỗ trợ bởi css module này.
Sử dụng tính năng chụp cuộn
Sử dụng nó khá đơn giản, chúng ta bổ sung các thuộc tính
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
1 cho vùng chứa và .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
2 cho các phần tử con bên trong. Khi nội dung bên trong vùng chứa được cuộn, nó sẽ tự động .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
3 các phần tử con như bạn đã định nghĩa. You can setup menu as belowhtml
css
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
kiểu cuộn-chụp
Thuộc tính
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
1 áp dụng cho vùng chứa, nó có thể đặt 1 trong 3 giá trị. .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
5, .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
6, .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
7. Ứng với mỗi giá trị, trình duyệt sẽ .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
3 theo cách khác nhau
6. browser will.container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start; }
3 at.container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start; }
31 when user stop scroll.container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start; }
7. trình duyệt.container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start; }
33 chụp nhanh tại.container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start; }
31 nếu trình duyệt thấy thích hợp.container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start; }
đệm cuộn
Thuộc tính
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
1, thuộc tính này cũng áp dụng cho vùng chứa. Theo mặc định, nội dung sẽ .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
3 vào các cạnh của container. Bạn có thể thay đổi điều đó bằng cách đặt thêm thuộc tính .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
37 cho vùng chứaĐiều này có thể hữu ích nếu bố cục của bạn có các yếu tố có thể kiểm tra nội dung của trang, chẳng hạn như
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
38cuộn-chụp-căn chỉnh
Thuộc tính này áp dụng cho các mặt hàng bên trong container, nó có thể có 1 trong 3 giá trị.
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
39, .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
20, và .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
21. Các giá trị này liên quan đến hướng cuộn. Nếu bạn cuộn theo chiều dọc, hãy bắt đầu tham chiếu [tham khảo] đến cạnh của phần tử. Nếu bạn cuộn theo chiều ngang, nó sẽ tham chiếu đến Cạnh bên trái.
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
20 và .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
21 theo cùng một .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
24. Bạn có thể đặt các giá trị khác nhau cho mỗi hướng cuộn được phân tách bằng khoảng trốngcuộn-chụp-dừng
Thuộc tính này có thể nhận 1 trong 2 giá trị
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
25, .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
26Theo mặc định, snapping scroll only started when user's stop scroll
Bạn có thể thay đổi điều này bằng cách đặt
.container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
28 ở bất kỳ phần tử con nào. Điều này buộc .container {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
29 Di chuyển dừng lại trên phần tử đó trước khi người dùng có thể tiếp tục cuộn