Thuộc tính scroll-padding-block-end trong CSS

Định nghĩa và cách sử dụng

scroll-padding-block-end Thuộc tính xác định khoảng cách từ cuối container đến vị trí dính của phần tử trong hướng khối.

Điều này có nghĩa là, khi bạn dừng cuộn, cuộn sẽ điều chỉnh nhanh chóng và dừng lại ở khoảng cách được chỉ định giữa vị trí dính và容器的末端.

Hướng khối là vị trí tương đối với dòng hiện tại, hướng đặt của dòng tiếp theo. Đây cũng là cách bố trí trên trang của các thẻ có CSS display: block; như thẻ <p> và <div>. Hướng khối phụ thuộc vào ngôn ngữ viết, ví dụ, ngôn ngữ Mông Cổ có dòng mới từ trái sang phải, vì vậy hướng khối là từ trái sang phải, trong khi hướng khối của trang tiếng Anh là xuống dưới. Hướng khối có thể được xác định thông qua thuộc tính CSS writing-mode để định nghĩa.

Vị trí dính cuộn là vị trí khi bạn dừng cuộn, phần tử con sẽ dính vào vị trí trong phần tử chứa.

Lưu ý:Thuộc tính này chỉ có hiệu lực trong hướng khối scroll-snap-align Thuộc tính được đặt thành 'end' mới có hiệu lực.

Để nhìn thấy scroll-padding-block-end Thuộc tính trên phần tử cha, thì phải đặt scroll-snap-align Thuộc tính, và đặt scroll-padding-block-end và scroll-snap-type Thuộc tính.

Mô hình

Ví dụ 1

Đặt lề cuộn theo hướng khối từ cuối phần tử đến vị trí dính cuộn là 20px:

div {
  scroll-padding-block-end: 20px;
}

Thử ngay

Ví dụ 2: Thư viện ảnh

Trong album ảnh có hành vi dính cuộn, có thể sử dụng scroll-padding-block-end Thuộc tính này sẽ đẩy ảnh lên phần tử cố định:

#container {
  scroll-padding-block-end: 30px;
}

Thử ngay

Ví dụ 3

Khi phần tử chứa writing-mode Khi thuộc tính này được đặt thành vertical-rl, hướng khối của phần tử cuối cùng và phần tử con từ dưới lên bên trái. Điều này sẽ ảnh hưởng đến hành vi dính cuộn và scroll-padding-block-end Cách hoạt động của thuộc tính:

#container {
  scroll-padding-block-end: 20px;
  writing-mode: vertical-rl;
}

Thử ngay

Ngôn ngữ CSS

scroll-padding-block-end: auto|value|initial|inherit;

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

相关页面

Tham khảo:Thuộc tính scroll-snap-align trong CSS

Tham khảo:Thuộc tính scroll-snap-type trong CSS

Tham khảo:Thuộc tính writing-mode trong CSS