scroll-padding-inline-start
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 scroll-padding-inline-start xác định độ lệch cho cạnh đầu theo chiều inline của vùng xem tối ưu của scrollport: vùng được sử dụng làm vùng mục tiêu để đưa nội dung 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 vị 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.
Try it
scroll-padding-inline-start: 0;
scroll-padding-inline-start: 20px;
scroll-padding-inline-start: 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ú pháp
/* Giá trị từ khóa */
scroll-padding-inline-start: auto;
/* Giá trị <length> */
scroll-padding-inline-start: 10px;
scroll-padding-inline-start: 1em;
scroll-padding-inline-start: 10%;
/* Giá trị toàn cục */
scroll-padding-inline-start: inherit;
scroll-padding-inline-start: initial;
scroll-padding-inline-start: revert;
scroll-padding-inline-start: revert-layer;
scroll-padding-inline-start: unset;
Giá trị
<length-percentage>-
Độ lệch hướng vào trong từ cạnh đầu theo chiều inline của scrollport, là một giá trị độ dài hợp lệ hoặc một tỉ lệ phần trăm.
auto-
Độ lệch được xác định bởi tác nhân người dùng. Thông thường đây sẽ là 0px, nhưng tác nhân người dùng có thể phát hiện và sử dụng giá trị khác nếu giá trị khác 0 phù hợp hơn.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |
Cú pháp hình thức
scroll-padding-inline-start =
auto |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Thông số kỹ thuật
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |
Khả năng tương thích trình duyệt
Xem thêm
- Module CSS scroll snap
- Cuộn được kiểm soát tốt với CSS scroll snap trên web.dev (2018)