scroll-snap-type

scroll-snap-type: x mandatory 是一個 CSS 屬性，用於控制一個可滾動容器（例如一個裝有多個子項的盒子）的滾動吸附行為。

拆解成兩部分來理解

1. scroll-snap-type:

這個屬性本身告訴瀏覽器：“這個容器要啓用滾動吸附功能”。

2. x

這個值定義了吸附的方向。

• x: 表示只進行水平方向（x軸）的滾動吸附。
• y: 表示只進行垂直方向（y軸）的滾動吸附。
• both: 表示同時啓用水平和垂直方向的吸附（較少使用）。

3. mandatory

這個值定義了吸附的嚴格程度，這是最關鍵的部分。

• mandatory (強制): 瀏覽器必須在每次滾動停止時，將滾動位置吸附到最近的吸附點。即使用户沒有完全滾動到下一個項目的一半，只要滾動一停止，頁面就會自動“補足”剩下的距離，精準地定位到某個吸附點。
• proximity (近似): 瀏覽器會根據用户的滾動速度和距離，智能判斷是否要吸附到最近的吸附點。如果滾動得很輕、很近，它可能不會吸附，保持原樣；如果滾動得比較明顯，它就會吸附。這個行為更寬鬆，把決定權部分交給瀏覽器。

簡單來説：

scroll-snap-type: x mandatory; 的意思就是：

“這個容器在水平滾動時，必須強制將滾動停止的位置精準地對齊到預先設置好的吸附點上。”

如何使用？

要讓它工作，你需要同時設置兩個屬性：

1. 在父容器（滾動容器）上：設置 scroll-snap-type 並定義滾動方向和行為（就是你問的這句）。
2. 在子項（內容項）上：使用 scroll-snap-align 來定義吸附點的位置，例如 start（起始邊緣）、center（中心）、end（結束邊緣）。

示例：

橫向的圖片輪播

<div class="carousel"> <!-- 滾動容器 -->
  <img src="image1.jpg" class="carousel__item">
  <img src="image2.jpg" class="carousel__item">
  <img src="image3.jpg" class="carousel__item">
</div>

.carousel {
  width: 100%;
  overflow-x: auto; /* 允許橫向滾動 */
  display: flex; /* 讓子項橫向排列 */
  scroll-snap-type: x mandatory; /* 核心：強制水平吸附 */
  /* 為了更好的體驗，通常還會加上下面這行 */
  scroll-behavior: smooth; /* 讓滾動吸附時有平滑的動畫 */
}

.carousel__item {
  scroll-snap-align: start; /* 定義吸附點：每個子項的起始邊緣為吸附點 */
  /* 或者也可以用 center，讓每個圖片居中對齊 */
  /* scroll-snap-align: center; */
}

當你滑動這個橫向輪播圖時，無論你滑動的幅度是大是小，滾動停止後，都會自動調整位置，確保某一張圖片的左側邊緣（因為設置了 start） 嚴格與容器的左側對齊，而不會停在兩張圖片的中間位置。

這個屬性極大地改善了移動端和桌面端可滾動內容的用户體驗，常見於圖片畫廊、橫向導航、幻燈片等組件。