Đệm cuộn - Thủ thuật CSS

Anonim

scroll-paddinglà 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-paddinglà một thuộc tính tùy chọn cho bất kỳ vùng chứa chụp nhanh nào. Vùng chứa chụp cuộn được xác định bất cứ khi nào thuộc scroll-snap-typetính được đặt thành bất kỳ giá trị nào bên cạnh đó none. Để 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.

Được rồi, hãy chuyển sang phần đệm cuộn

scroll-paddingđược sử dụng để điều chỉnh vùng xem tối ưu của vùng chứa snapping. Điều này hữu ích nếu vùng chứa có các phần tử chẳng hạn như tiêu đề cố định sẽ che khuất các phần tử bên trong hoặc nếu vùng chứa có thể cuộn được cần một số không gian để cung cấp cho các phần tử bên trong không gian để thở sau khi chúng đã được “bắt chặt” vào vị trí.

Một ví dụ đơn giản sẽ được sử dụng scroll-paddingđể tạo một số khoảng cách cố định 50pxở trên cùng và bên trái của vùng chứa:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Các khu vực có màu hồng hiển thị phần đệm cuộn trên vùng chứa chụp cuộn.

Cú pháp

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

Lưu ý quan trọng về longhands: Chrome hiện không hỗ trợ định dạng scroll-paddingvà scroll-marginthuộc tính tốc ký. 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 crôm để biết thêm chi tiết và trạng thái hiện tại.

Giá trị

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

  • autođể phần đệm được xác định bởi trình duyệt / tác nhân người dùng. Nói chung, điều này có nghĩa là giá trị 0px, nhưng có thể khác 0 nếu tác nhân người dùng quyết định một giá trị khác phù hợp hơn.
  • được ghi vào tương tự paddingvà 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) hoặc tính theo phần trăm container riêng của mình.

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