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 的复杂滚动吸附效果，性能更好，代码更优雅！

阅读原文：原文链接