Kiểu cuộn-snap - Thủ thuật CSS

Anonim

Các scroll-snap-typebất động sản là một phần của CSS Scroll Snap Module. Scroll snapping đề cập đến việc "khóa" vị trí của khung nhìn đối với các phần tử cụ thể trên trang khi cửa sổ (hoặc vùng chứa có thể cuộn) được cuộn. Hãy nghĩ về nó giống như đặt một nam châm lên trên một phần tử dính vào đầu khung nhìn và buộc trang ngừng cuộn ngay tại đó.

Điều này rất hữu ích nếu bạn muốn dừng trình duyệt tại các điểm cụ thể trên trang. Ví dụ: Một người dùng duyệt thư viện ảnh có thể không muốn cuộn qua nửa chừng một hình ảnh - họ có thể muốn hình ảnh “chụp nhanh” vào đúng vị trí khi họ cuộn. Scroll snapping cung cấp cho các nhà phát triển một cách thuần CSS để xử lý hành vi này.

scroll-snap-typelà một thuộc tính bắt buộc trên bất kỳ vùng chứa có thể cuộn nào mà bạn muốn thêm chụp cuộn vào. Nó trả lời ba câu hỏi cho một vùng chứa cuộn:

  1. Vùng chứa có sử dụng chức năng chụp cuộn không?
  2. Trên trục nào - x (ngang), y (dọc), khối hoặc nội tuyến - nên áp dụng chụp cuộn?
  3. Thao tác chụp cuộn nên hoạt động như thế nào? Nó có bị ép buộc 100% thời gian hay nó chỉ có hiệu lực khi người dùng đến “đủ gần” với một vị trí chụp nhanh? Thêm về điều này sau.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Cú pháp

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Giá trị

scroll-snap-type chấp nhận các giá trị sau:

  • none tắt chức năng chụp cuộn.
  • x chỉ cho phép chụp cuộn dọc theo trục x.
  • y chỉ cho phép chụp cuộn dọc theo trục y.
  • block chỉ cho phép chụp cuộn dọc theo trục khối.
  • inline chỉ cho phép chụp cuộn dọc theo trục nội tuyến.
  • bothcho phép chụp cuộn dọc theo cả hai trục (mà bạn có thể coi là xvà y, hoặc inlinevà block.
  • mandatory là một giá trị nghiêm ngặt cho biết trình duyệt luôn đi đến vị trí nhanh khi không có thao tác cuộn.
  • proximitylà một giá trị nghiêm ngặt cho biết trình duyệt chuyển đến vị trí snap nếu một hành động cuộn khá gần với vị trí snap. Nếu nó không khá gần, thì trình duyệt sẽ không chụp và cuộn sẽ hoạt động bình thường.

Thí dụ

Xem ví dụ về kiểu cuộn bút
bằng CSS-Tricks (@ css-trick) trên CodePen.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
69 68 11 * 79 11

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 81 11.0-11.2

Có liên quan

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Tài nguyên

  • Đề xuất ứng viên CSS Scroll Snap W3C
  • Chụp cuộn CSS thực tế
  • Giới thiệu CSS Scroll Snap Points