Lề cuộn - Thủ thuật CSS

Anonim

scroll-marginlà 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-marginlà 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.

Nhập lề cuộn

scroll-marginđược sử dụng để điều chỉnh khu vực snap của một phần tử (hộp xác định nơi phần tử sẽ được snap tới). Việc thêm scroll-marginrất hữu ích khi bạn cần cung cấp một khoảng trống cho phần tử từ mép của vùng chứa khi được gắn vào vị trí, nhưng cho phép trong các trường hợp mà mỗi phần tử có thể cần khoảng cách hơi khác nhau. Nếu tất cả các phần tử có cùng yêu cầu về khoảng cách, hãy xem xét sử dụng scroll-paddingtrên vùng chứa mẹ thay vì sử dụng scroll-marginvì điều đó ảnh hưởng đến khoảng cách cho tất cả các phần tử trong vùng chứa.

Một ví dụ đơn giản trong đó scroll-margincho phép khoảng cách 50px xung quanh phía trên và bên trái của một phần tử trông như sau:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Vùng màu hồng đại diện cho scroll-marginphần tử này.

Cú pháp

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Lưu ý quan trọng về longhands: Chrome (và có thể là các trình duyệt khác) hiện không hỗ trợ định dạng scroll-paddingvà scroll-marginthuộc tính viết tay. Sử dụng cách viết tắt để hỗ trợ trình duyệt tối đa. Xem sự cố này trên trình theo dõi lỗi crom để biết thêm chi tiết và trạng thái hiện tại.

Giá trị

scroll-marginchấp nhận sau một thời gian giá trị, được viết tương tự marginvà các tài sản khác mà giá trị có thể được định nghĩa với các đơn vị ( px, em, vh, vv). Xem Mô-đun Đơn vị và Giá trị W3C để biết thêm thông tin. Phần trăm không thể được sử dụng cho scroll-marginmỗi thông số kỹ thuật.

Thí dụ

Xem ví dụ về phần đệm cuộn bút
của 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-snap-type
  • 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