SS scroll-snap：讓滾動變得絲滑又有趣！

如果你想讓你的圖片、卡片、內容區在滾動時自動對齊，像磁鐵一樣吸附到位？那你一定不能錯過 CSS 的 scroll-snap 系列屬性！

下面先上效果圖

效果很明顯，只需要輕輕一劃；每張圖片都會“啪”地吸附到容器頂部

核心代碼

其實代碼很簡單,主要就三個css屬性，所以我說是三行css代碼：

• scroll-snap-type: y mandatory; /* 縱向強制吸附 */
• scroll-snap-align: start; /* 每張圖片吸附到頂部 */
• scroll-snap-stop: always /* 不會跳過圖片 */

要注意的是第一個屬性是寫給父元素的；下面兩個是給子元素的，如下：

<div class="carousel">  <img src="..." />  <img src="..." />  ...</div>

.carousel {  overflow: auto;  display: flex;  flex-direction: column; /* 縱向排列 */  scroll-snap-type: y mandatory; /* 縱向強制吸附 */}.carousel img {  height: 240px;  scroll-snap-align: start; /* 每張圖片吸附到頂部 */  scroll-snap-stop: always; /* 不會跳過圖片 */}

scroll-snap 相關屬性全解

scroll-snap-type

• 作用：定義容器的滾動方向和吸附行為。
• 常用寫法
• scroll-snap-type: x mandatory; 橫向強制吸附
• scroll-snap-type: y proximity; 縱向臨近吸附
• 小貼士：mandatory 表示必須吸附，proximity 則是“靠得近才吸”。

scroll-snap-align

• 作用：定義子元素在滾動時如何對齊到容器。
• 常用寫法：
• scroll-snap-align: start; 吸附到容器起始邊
• scroll-snap-align: center; 吸附到容器中間

scroll-snap-stop

• 作用：防止用戶快速滑動時跳過吸附點。
• 常用寫法：
• scroll-snap-stop: always;每次滾動都必須停在吸附點

還有這些相關屬性

• scroll-padding：定義吸附時的內邊距
• scroll-margin：定義子元素吸附時的外邊距

scroll-snap 在實際工作中的妙用

• 圖片/卡片輪播
  移動端、H5、App 內常見的圖片輪播、卡片滑動，scroll-snap 讓交互更自然。
• 多段內容閱讀
  長文檔、分章節內容，用戶滾動時自動對齊到每一節，閱讀體驗大提升。
• 數據看板/儀表盤
  橫向或縱向滾動的圖表、數據塊，scroll-snap 讓切換更順暢。
• 自定義滑動菜單
  比如底部 Tab、頂部導航，滑動時自動吸附到選項。

總結

scroll-snap 就像給滾動加了“磁鐵”，讓你的頁面交互更高級、更順滑。讓你用純 CSS 實現原本需要 JS 的復雜滾動吸附效果，性能更好，代碼更優雅！

閱讀原文：原文鏈接