Thuộc tính CSS cuộn-đệm-phải
Ví dụ
Đặt phần đệm cuộn thành 20px từ phía bên phải của vùng chứa đến vị trí chụp:
div {
scroll-padding-right: 20px;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc scroll-padding-right
chỉ định khoảng cách từ cạnh phải của vùng chứa đến vị trí đính trên các phần tử con.
Vị trí đính là vị trí trên phần tử con nơi nó khớp vào vị trí trong vùng chứa khi bạn dừng cuộn. Vị trí chụp được đặt bằng thuộc tính scroll-snap-align
, nhưng cũng có thể bị ảnh hưởng bởi direction
thuộc tính CSS và writing-mode
.
Lưu ý: Thuộc tính này chỉ hoạt động nếu vị trí snap được đặt ở bên phải của phần tử con.
Để xem hiệu ứng từ thuộc tính scroll-padding-right
, thuộc tính scroll-snap-align
phải được đặt trên các phần tử con và các thuộc tính scroll-padding-right
và scroll-snap-type
phải được đặt trên phần tử cha.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.scrollPaddingRight="20px"Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
scroll-padding-right | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
Cú pháp CSS
scroll-padding-right: auto| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | Default value. The browser calculates the padding |
length | Specifies scroll-padding-right in px, pt, cm, etc. Negative values are not allowed. Read about length units |
% | Specifies the padding in percent of the width of the containing element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Thư viện hình ảnh
Thuộc tính scroll-padding-right
có thể được sử dụng trong thư viện hình ảnh với hành vi chụp nhanh, để đẩy hình ảnh vào chế độ xem từ phía sau một phần tử cố định:
#container > img {
scroll-padding-left: 30px;
}
Đặt phần đệm cuộn ở bên phải
Thuộc tính scroll-padding-right
cũng có thể được đặt trên vùng chứa khi hành vi chụp nhanh được đặt theo cả hai hướng. Di chuyển đến phần tử tiếp theo theo chiều ngang để xem hiệu ứng:
#container > div {
scroll-padding-right: 30px;
}
Chụp vị trí
Vị trí chụp phải được đặt ở bên phải của các phần tử con để thuộc tính scroll-padding-right
hoạt động. Trong ví dụ này, giá trị thuộc tính direction
'rtl' thay đổi vị trí đính từ bên phải sang bên trái của các phần tử con. Với mã như thế này, thuộc tính scroll-padding-right
không còn hoạt động:
#container {
direction: rtl;
scroll-padding-right: 30px;
}
#container > div {
scroll-snap-align: none end;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính hướng CSS: Thuộc tính CSS Direction
Thuộc tính CSS cuộn-snap-align: Thuộc tính CSS Scroll-snap-align
Thuộc tính CSS cuộn-snap-type: Thuộc tính CSS Scroll-snap-type
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS