CSS 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 的复杂滚动吸附效果，性能更好，代码更优雅！
最后
我把完整代码放到网盘了；里面还有往期的小demo；喜欢的可以下载体验；下面是获取方法
