Scroll Snap
CSS Scroll Snap 是一項用於控制捲動行為的 CSS 特性，可以在水平或垂直方向上將捲動容器的內容分割成多個"區塊"或"幀"，使使用者能夠以一種分段的方式捲動，而不是平滑捲動，常用在滑塊、輪播圖等互動元件。
容器
在外層容器上使用 scroll-snap-type 屬性來定義捲動容器的捲動類型
.container{
scroll-snap-type: x mandatory; ## 強制性的水平捲動
scroll-snap-type: y proximity; ## 垂直捲動，以最接近的捲動區塊為對齊目標
}
子元素
子元素使用 scroll-snap-align 屬性來指定捲動區塊在捲動容器內的對齊方式。常見的值包括：
scroll-snap-align: start：將捲動區塊對齊到容器的開始scroll-snap-align: center：將捲動區塊對齊到容器的中心scroll-snap-align: end：將捲動區塊對齊到容器的末尾
container {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory; /* 強制性的水平捲動 */
}
.item {
scroll-snap-align: start; /* 捲動區塊對齊到容器的開始 */
flex: 0 0 100%; /* 每個項目占滿容器寬度 */
}
<div class="container">
<div class="item">項目1</div>
<div class="item">項目2</div>
<div class="item">項目3</div>
<!-- 更多項目... -->
</div>