Thuộc tính scroll-padding-bottom của CSS

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

scroll-padding-bottom thuộc tính chỉ định khoảng cách từ đáy container đến vị trí dính của phần tử con.

vị trí dính là vị trí mà khi bạn dừng cuộn, phần tử con dính vào vị trí trong container. Vị trí dính thông qua scroll-snap-align cài đặt thuộc tính, nhưng cũng có thể bị ảnh hưởng bởi thuộc tính CSS hướng dẫn và writing-mode 的影响。

Lưu ý:Thuộc tính này chỉ hoạt động khi vị trí dán được đặt ở dưới cùng của phần tử con.

để thấy scroll-padding-bottom Thuộc tính trên phần tử cha, thì hiệu ứng của chúng phải được đặt trên phần tử con để scroll-snap-align Thuộc tính, và đặt scroll-padding-bottom và scroll-snap-type Thuộc tính.

Mẫu

Ví dụ 1

Đặt độ lấp đầy cuộn từ dưới cùng của khung đến vị trí dán là 20px:

div {
  scroll-padding-bottom: 20px;
}

Thử nghiệm trực tiếp

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

Trong thư viện hình ảnh có hành vi dán, bạn có thể sử dụng scroll-padding-bottom Thuộc tính sẽ đẩy hình ảnh lên phần tử cố định:

#container {
  scroll-padding-bottom: 30px;
}

Thử nghiệm trực tiếp

Ví dụ 3: Đặt độ lấp đầy cuộn dưới đáy

Khi đặt hành vi dán ở hai hướng, bạn cũng có thể đặt scroll-padding-bottom Thuộc tính. Cuộn theo hướng dọc để xem hiệu ứng:

#container {
  scroll-padding-bottom: 30px;
}

Thử nghiệm trực tiếp

Ví dụ 4: Vị trí dán

Để làm cho scroll-padding-bottom Thuộc tính hoạt động, vị trí dán phải được đặt ở dưới cùng của phần tử con. Trong ví dụ này,writing-mode Thuộc tính sẽ dán vị trí từ dưới cùng của phần tử con sang bên trái. Khi sử dụng mã như vậy,scroll-padding-bottom Thuộc tính sẽ không còn hoạt động:

#container {
  writing-mode: vertical-rl;
  scroll-padding-bottom: 30px;
}
#container > div {
  scroll-snap-align: end none;
}

Thử nghiệm trực tiếp

Ngôn ngữ CSS

scroll-padding-bottom: auto|value|initial|inherit;

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Bảng 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 direction trong CSS

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

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

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