Cuộn xuống chỉ báo css

Ngày 18 tháng 8 năm 2022

Chỉ báo cuộn xuống

CSS 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ả

Thẻ

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ày

Nhữ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 below

html

<div class='container'>
    <section class='child'>section>
    <section class='child'>section>
    <section class='child'>section>
div>

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

• .container {
    scroll-snap-type: y mandatory;
  }
  
  .child {
    scroll-snap-align: start;
  }
  

  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

đệ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;
}

38

cuộ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ống

cuộ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;
}

26

Theo 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