scroll-padding-inline-end
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-end xác định các độ lệch cho cạnh cuối trong chiều inline của 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.
Try it
scroll-padding-inline-end: 0;
scroll-padding-inline-end: 20px;
scroll-padding-inline-end: 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: end;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Cú pháp
/* Giá trị từ khóa */
scroll-padding-inline-end: auto;
/* Giá trị <length> */
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;
/* Giá trị toàn cục */
scroll-padding-inline-end: inherit;
scroll-padding-inline-end: initial;
scroll-padding-inline-end: revert;
scroll-padding-inline-end: revert-layer;
scroll-padding-inline-end: unset;
Giá trị
<length-percentage>-
Độ lệch hướng vào trong từ cạnh cuối inline 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 | 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-end =
auto |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |
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)