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

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

scroll-padding-left Thuộc tính xác định khoảng cách từ bên trái của容器 đến vị trí hấp dẫn của phần tử.

Vị trí hấp dẫn là vị trí mà phần tử con dính vào trong容器的 khi cuộn dừng lại.

Vị trí hấp dẫn được xác định bởi 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 direction và writing-mode ảnh hưởng.

Lưu ý:Chỉ có tính năng này mới hoạt động khi vị trí hấp dẫn được đặt ở bên trái của phần tử con.

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

Mô hình

Ví dụ 1

Đặt margin trong cuộn từ bên trái của khung đến vị trí giữ là 20px:

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

Thử nghiệm trực tiếp

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

scroll-padding-left Thuộc tính này có thể được sử dụng cho hình ảnh galeri có hành vi giữ để đẩy hình ảnh từ phần tử cố định vào khung nhìn:

#container > img {
  scroll-padding-left: 30px;
}

Thử nghiệm trực tiếp

Ví dụ 3: Đặt滚动内边距 ở bên trái

Khi đã đặt hành vi giữ ở cả hai hướng, bạn cũng có thể đặt scroll-padding-left Thuộc tính. Cuộn的水平滚动到下一个元素以查看效果:

#container > div {
  scroll-padding-left: 30px;
}

Thử nghiệm trực tiếp

Ví dụ 4: Vị trí giữ

Để làm cho scroll-padding-left Thuộc tính hoạt động, vị trí giữ phải được đặt ở bên trái của phần tử con. Trong ví dụ này,direction Giá trị thuộc tính 'rtl' sẽ giữ vị trí từ bên trái của phần tử con sang bên phải. Khi sử dụng mã này,scroll-padding-left Thuộc tính sẽ không còn hoạt động:

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

Thử nghiệm trực tiếp

Ngôn ngữ CSS

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

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số 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 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 trong CSS