scroll-padding-inline
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Thuộc tính viết tắt scroll-padding-inline đặt khoảng đệm cuộn của một phần tử theo chiều inline.
Try it
scroll-padding-inline: 0;
scroll-padding-inline: 20px;
scroll-padding-inline: 2em;
<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 {
flex-wrap: wrap;
}
.default-example .info {
width: 100%;
padding: 0.5em 0;
font-size: 90%;
}
.scroller {
text-align: left;
width: 250px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: x mandatory;
}
.scroller > div {
flex: 0 0 250px;
width: 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;
}
Các thuộc tính scroll-padding 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 thứ vào tầm nhìn của người dùng. Điều này cho phép tác giả loại trừ các vùng của scrollport bị che khuất bởi nội dung khác (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.
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-inline: auto;
/* Giá trị <length> */
scroll-padding-inline: 10px;
scroll-padding-inline: 1em 0.5em;
scroll-padding-inline: 10%;
/* Giá trị toàn cục */
scroll-padding-inline: inherit;
scroll-padding-inline: initial;
scroll-padding-inline: revert;
scroll-padding-inline: revert-layer;
scroll-padding-inline: 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 độ dài hợp lệ hoặc phần trăm.
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.
Đị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-inline =
[ auto | <length-percentage [0,∞]> ]{1,2}
<length-percentage> =
<length> |
<percentage>
Thông số kỹ thuật
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-inline |
Tương thích trình duyệt
Xem thêm
- Module CSS scroll snap
- Well-controlled scrolling with CSS scroll snap trên web.dev (2018)