scroll-margin-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-margin-inline-start xác định lề của vùng cuộn snap tại điểm bắt đầu của chiều inline, được dùng để căn snap hộp này vào snapport. Vùng cuộn snap được xác định bằng cách lấy hộp viền đã biến đổi, tìm hộp bao hình chữ nhật của nó (căn chỉnh theo trục trong không gian tọa độ của vùng chứa cuộn), sau đó thêm các khoảng cách đã chỉ định.
Try it
scroll-margin-inline-start: 0;
scroll-margin-inline-start: 20px;
scroll-margin-inline-start: 2em;
<section class="default-example" id="default-example">
<div class="scroller">
<div>1</div>
<div id="example-element">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ị <length> */
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;
/* Giá trị toàn cục */
scroll-margin-inline-start: inherit;
scroll-margin-inline-start: initial;
scroll-margin-inline-start: revert;
scroll-margin-inline-start: revert-layer;
scroll-margin-inline-start: unset;
Giá trị
<length>-
Khoảng cách tính từ cạnh bắt đầu inline của vùng chứa cuộn.
Định nghĩa hình thức
| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |
Cú pháp hình thức
scroll-margin-inline-start =
<length>
Ví dụ
Minh họa cơ bản
Ví dụ này triển khai điều gì đó rất giống với ví dụ tương tác ở trên, ngoại trừ ở đây chúng ta sẽ giải thích cách nó được triển khai.
Mục tiêu ở đây là tạo bốn khối cuộn ngang, trong đó khối thứ hai và thứ ba sẽ snap vào vị trí, gần nhưng không hoàn toàn ở phía trái của mỗi khối.
HTML
HTML bao gồm một scroller với bốn phần tử con:
<div class="scroller">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
CSS
Hãy cùng xem qua CSS. Container bên ngoài được định kiểu như sau:
.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;
}
Các phần quan trọng liên quan đến scroll snapping là overflow-x: scroll, đảm bảo nội dung sẽ cuộn chứ không bị ẩn, và scroll-snap-type: x mandatory, quy định rằng scroll snapping phải xảy ra dọc theo trục ngang, và thanh cuộn luôn dừng lại tại một điểm snap.
Các phần tử con được định kiểu như sau:
.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(2n) {
background-color: white;
color: rebeccapurple;
}
Phần quan trọng nhất ở đây là scroll-snap-align: start, xác định rằng các cạnh bên trái (các "điểm bắt đầu" dọc theo trục x trong trường hợp này) là các điểm snap được chỉ định.
Cuối cùng, chúng ta chỉ định giá trị scroll-margin, mỗi giá trị khác nhau cho phần tử con thứ hai và thứ ba:
.scroller > div:nth-child(2) {
scroll-margin-inline-start: 1rem;
}
.scroller > div:nth-child(3) {
scroll-margin-inline-start: 2rem;
}
Điều này có nghĩa là khi cuộn qua các phần tử con ở giữa, thanh cuộn sẽ snap đến 1rem bên ngoài cạnh bắt đầu inline của <div> thứ hai, và 2rem bên ngoài cạnh bắt đầu inline của <div> thứ ba.
Kết quả
Hãy tự thử:
Đặc tả
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |
Khả năng 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)