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

定义和用法

scroll-padding-right 属性指定从容器右侧到子元素吸附位置的距离。

吸附位置是指在停止滚动时，子元素在容器中吸附到位的位置。

吸附位置由 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction và writing-mode 的影响。

Lưu ý:此属性仅在吸附位置设置在子元素右侧时有效。

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

Mô hình

Ví dụ 1

Đặt lề trong cuộn từ bên phải của khung để vị trí dán là 20px:

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

Thử ngay

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

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

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

Thử ngay

Ví dụ 3: Đặt lề trong bên phải

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

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

Thử ngay

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

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

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

Thử ngay

Ngôn ngữ CSS

scroll-padding-right: 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 của 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