Scroll-snap-align - Thủ thuật CSS

Anonim

scroll-snap-alignlà 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-alignlà một thuộc tính bắt buộc đối với 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-aligncho trình duyệt mà một phần của một yếu tố nên được sắp xếp khi một điểm chụp là gặp phải: nên phần tử chụp đến start, centerhoặc endcủa vùng chứa mẹ có chứa các scroll-snap-typebất động sản?

Nếu bạn muốn một phần tử gắn vào vị trí ở đầu phần tử đó, hãy đặt cho nó một scroll-snap-aligngiá trị như sau:

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

Cú pháp

scroll-snap-align: ( none | start | end | center )(1,2)

Bạn có thể chỉ định tối đa 2 giá trị cho thuộc tính này, tương ứng đại diện cho khối và trục nội tuyến. Nếu bạn chỉ đưa ra 1 giá trị, giá trị đó sẽ được sử dụng cho cả hai trục.

Giá trị

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

  • none vô hiệu hóa thao tác cuộn trên phần tử
  • start căn chỉnh phần bắt đầu của phần tử với snapport của vùng chứa cuộn khi được gắn vào vị trí
  • end căn chỉnh phần cuối của phần tử với sự cố định của vùng chứa cuộn khi được gắn vào vị trí
  • center căn chỉnh tâm của phần tử với phần hỗ trợ của vùng chứa cuộn khi được gắn vào vị trí

Thí dụ

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-snap-type
  • scroll-margin
  • scroll-padding
  • 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