scroll-padding
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Thuộc tính viết tắt scroll-padding đặt khoảng đệm cuộn cho tất cả các cạnh của một phần tử cùng một lúc. Nó chỉ định các độ lệch xác định vùng hiển thị tối ưu của scrollport trong một scroll container.
Try it
scroll-padding: 0;
scroll-padding: 20px;
scroll-padding: 20%;
<section class="default-example" id="default-example">
<div class="scroller" id="example-element">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="info">Scroll »</div>
</section>
.default-example .info {
inline-size: 100%;
padding: 0.5em 0;
font-size: 90%;
writing-mode: vertical-rl;
}
.scroller {
text-align: left;
height: 250px;
width: 270px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: y mandatory;
}
.scroller > div {
flex: 0 0 250px;
background-color: rebeccapurple;
color: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Thuộc tính thành phần
Thuộc tính này là viết tắt cho các thuộc tính CSS sau:
Cú pháp
/* Giá trị từ khóa */
scroll-padding: auto;
/* Giá trị <length> */
scroll-padding: 10px;
scroll-padding: 1em 0.5em 1em 1em;
scroll-padding: 10%;
/* Giá trị toàn cục */
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: revert;
scroll-padding: revert-layer;
scroll-padding: unset;
Giá trị
<length-percentage>-
Độ lệch hướng vào trong từ cạnh tương ứng của scrollport, dưới dạng
<length>hợp lệ hoặc<percentage>. auto-
Độ lệch được xác định bởi user agent. Giá trị này thường là
0px, nhưng user agent có thể phát hiện và làm gì đó khác nếu giá trị khác không phù hợp hơn.
Mô tả
Thuộc tính scroll-padding là viết tắt đặt scroll-padding-top, scroll-padding-right, scroll-padding-bottom, và scroll-padding-left, theo thứ tự đó, lần lượt đặt khoảng đệm cuộn trên, phải, dưới và trái của một scroll container.
Hữu ích khi tạo các scroll-snap container, thuộc tính scroll-padding cho phép xác định các độ lệch cho vùng hiển thị tối ưu của scrollport: vùng được sử dụng làm vùng mục tiêu để đưa các phần tử vào tầm nhìn của người dùng. Điều này cho phép bạn tạo các khoảng đệm trong scrollport để dành chỗ cho các đối tượng có thể che khuất nội dung, chẳng hạn như thanh công cụ hoặc thanh bên cố định, hoặc để tạo thêm khoảng trống giữa phần tử mục tiêu và các cạnh của scrollport.
Mặc dù được định nghĩa trong module CSS scroll snap, thuộc tính này áp dụng cho tất cả các scroll container, bất kể giá trị của thuộc tính scroll-snap-type.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | by computed value type |
Cú pháp hình thức
scroll-padding =
[ auto | <length-percentage [0,∞]> ]{1,4}
<length-percentage> =
<length> |
<percentage>
Thông số kỹ thuật
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |