Thuộc tính scroll-padding-top trong CSS

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

scroll-padding-top Thuộc tính xác định khoảng cách từ đỉnh container đến vị trí hấp dẫn của phần tử con.

Vị trí hấp dẫn là vị trí mà phần tử con ở trong container hấp dẫn vào khi dừng cuộn.

Vị trí dính được scroll-snap-align Thuộc tính được thiết lập, nhưng cũng có thể bị ảnh hưởng bởi thuộc tính CSS direction và writing-mode của thuộc tính

tác động.Lưu ý:

Thuộc tính này chỉ hoạt động khi vị trí dính được đặt trên cùng của phần tử con. scroll-padding-top Thuộc tính trên phần tử cha, hiệu ứng của thuộc tính này phải được đặt trên phần tử con để thấy scroll-snap-align Thuộc tính, và đặt scroll-padding-top và scroll-snap-type Thuộc tính.

Mô hình

Ví dụ 1

Đặt lề trong cuộn từ trên cùng của khung đến vị trí dính là 20px:

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

Thử nghiệm trực tiếp

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

scroll-padding-top Thuộc tính có thể được sử dụng trong hình ảnh galleri có hành vi dính để đẩy hình ảnh xuống dưới phần tử cố định:

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

Thử nghiệm trực tiếp

Ví dụ 3: Đặt滚动内边距 ở trên cùng

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

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

Thử nghiệm trực tiếp

Ví dụ 4: Vị trí dính

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

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

Thử nghiệm trực tiếp

Ngôn ngữ CSS

scroll-padding-top: 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.

Trang liên quan

Tham khảo：Thuộc tính direction của CSS

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 CSS