三行css代码，实现页面吸附滚动效果

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