Thuộc tính đệm cuộn CSS
Ví dụ
Đặt phần đệm cuộn thành 20px từ vùng chứa đến vị trí chụp:
div {
scroll-padding: 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 tính phần scroll-padding
chỉ định khoảng cách từ vùng chứa đến vị trí đính của các phần tử con.
Điều này có nghĩa là khi bạn dừng cuộn, quá trình cuộn sẽ nhanh chóng điều chỉnh và dừng ở một khoảng cách xác định từ vùng chứa đến vị trí chụp của phần tử con được lấy nét.
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.
Lưu ý: Trong ví dụ trên, phần đệm cuộn được đặt ở tất cả các cạnh, nhưng chỉ phần đệm cuộn ở phía trên cùng mới thay đổi hành vi cuộn vì cuộn-snap-align được đặt thành "bắt đầu".
Thuộc tính scroll-padding
là thuộc tính viết tắt của các thuộc tính sau:
Các giá trị cho thuộc tính scroll-padding
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính phần đệm cuộn có bốn giá trị:
- phần đệm cuộn: 15px 30px 60px 90px;
- khoảng cách trên cùng là 15px
- khoảng cách bên phải là 30px
- khoảng cách dưới cùng là 60px
- khoảng cách bên trái là 90px
Nếu thuộc tính phần đệm cuộn có ba giá trị:
- phần đệm cuộn: 15px 30px 60px;
- khoảng cách trên cùng là 15px
- khoảng cách trái và phải là 30px
- khoảng cách dưới cùng là 60px
Nếu thuộc tính phần đệm cuộn có hai giá trị:
- phần đệm cuộn: 15px 30px;
- khoảng cách trên và dưới là 15px
- khoảng cách trái và phải là 30px
Nếu thuộc tính phần đệm cuộn có một giá trị:
- phần đệm cuộn: 10px;
- cả bốn khoảng cách đều là 10px
Để xem hiệu ứng từ thuộc tính scroll-padding
, 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
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.scrollPadding="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 | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
Cú pháp CSS
scroll-padding: auto| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | Default value. The browser calculates the padding |
length | Specifies scroll-padding 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
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 xuống dưới một phần tử cố định:
#container {
scroll-padding: 30px 0 0 0;
}
Đặt phần đệm cuộn ở dưới cùng và bên phải
Thuộc tính scroll-padding
có thể được đặt ở cả phía dưới và bên phải của vùng chứa. Di chuyển đến phần tử tiếp theo theo cả chiều ngang và chiều dọc để xem hiệu ứng:
#container {
scroll-padding: 0 10px 30px 0;
}
Trang liên quan
Thuộc tính CSS cuộn-padding-bottom: Thuộc tính CSS Scroll-padding-bottom
Thuộc tính CSS cuộn-padding-left: Thuộc tính CSS Scroll-padding-left
Thuộc tính CSS cuộn-padding-right: Thuộc tính CSS Scroll-padding-right
Thuộc tính CSS cuộn-padding-top: Thuộc tính CSS Scroll-padding-top
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