scroll-snap-align
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính scroll-snap-align chỉ định vị trí snap của hộp dưới dạng căn chỉnh của snap area của nó (là alignment subject) trong snap port của vùng chứa snap (là alignment container).
Try it
scroll-snap-align: start;
scroll-snap-align: end;
scroll-snap-align: center;
<section class="default-example" id="default-example">
<div id="example-parent">
<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%;
}
#example-parent {
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;
}
#example-parent > div {
flex: 0 0 66%;
width: 250px;
background-color: rebeccapurple;
color: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#example-parent > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
Cú pháp
/* Giá trị từ khóa đơn */
scroll-snap-align: none;
scroll-snap-align: center;
scroll-snap-align: start;
scroll-snap-align: end;
/* Hai giá trị từ khóa */
scroll-snap-align: start end;
scroll-snap-align: end center;
scroll-snap-align: center start;
/* Giá trị toàn cục */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;
Giá trị
Có thể chỉ định một hoặc hai giá trị cho thuộc tính scroll-snap-align. Nếu chỉ đặt một giá trị, nó sẽ được áp dụng cho cả hai trục block và inline. Nếu đặt hai giá trị, giá trị đầu tiên điều khiển trục block và giá trị thứ hai điều khiển trục inline.
none-
Hộp không xác định vị trí snap trong trục đó.
start-
Căn chỉnh đầu của snap area cuộn của hộp này, trong snapport của vùng chứa cuộn, là một vị trí snap trong trục này.
end-
Căn chỉnh cuối của snap area cuộn của hộp này, trong snapport của vùng chứa cuộn, là một vị trí snap trong trục này.
center-
Căn chỉnh giữa của snap area cuộn của hộp này, trong snapport của vùng chứa cuộn, là một vị trí snap trong trục này.
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
scroll-snap-align =
[ none | start | end | center ]{1,2}
Thông số kỹ thuật
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-snap-align |
Khả năng tương thích trình duyệt
Xem thêm
scroll-snap-stopscroll-initial-target- Module CSS scroll snap
- Cuộn được kiểm soát tốt với CSS scroll snap trên web.dev (2018)