Cuộn-snap-dừng - Thủ thuật CSS

Anonim

scroll-snap-stoplà một phần của Mô-đun CSS Scroll Snap. 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ề một vùng chứa chụp cuộ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 đó.

scroll-snap-stoplà thuộc tính tùy chọn cho phần tử chụp nhanh trong vùng chứa chụp nhanh. Để biết thêm thông tin về các vùng chứa chụp cuộn, hãy xem scroll-snap-typemục nhập niên giám.

scroll-snap-stopcho phép bạn buộc vùng chứa chụp cuộn để gắn vào một phần tử cụ thể. Giả sử bạn đang cuộn trong một vùng chứa có khả năng cuộn và bạn đã tạo cho nó một vòng quay khổng lồ của con lăn chuột. Thông thường, trình duyệt sẽ để cho tốc độ cuộn của bạn bay qua các điểm nhanh cho đến khi nó ổn định ở một điểm nhanh gần với vị trí cuộn thường kết thúc. Bằng cách cài đặt, scroll-snap-stopbạn có thể cho trình duyệt biết rằng nó phải dừng trên một phần tử cụ thể trước khi cho phép người dùng vượt qua nó.

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-stop: always; )

Cú pháp

scroll-snap-stop: normal | always;

Giá trị

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

  • normal là giá trị mặc định và cho phép một phần tử được cuộn qua mà không cần chụp
  • always sẽ buộc trình duyệt phải gắn vào phần tử này, ngay cả khi cuộn thường đi qua phần tử này

Thí dụ

Xem ví dụ về điểm dừng cuộn của 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

Lưu ý rằng Chrome có thể không hỗ trợ scroll-snap-stop: always;tại thời điểm này.

Có liên quan

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

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