← 返回导航

滚动捕捉效果

tricks
第一屏

滑动查看下一张

第二屏

scroll-snap-type

第三屏

纯 CSS 实现

第四屏

丝滑滚动

第五屏

最后一张啦

左右滑动查看，自动吸附到每屏

关键点

  • 滚动捕捉通过 scroll-snap-type 定义容器的滚动捕捉行为，滚动结束后自动对齐
  • scroll-snap-type: x mandatory 表示水平方向强制捕捉，每次停在子元素边界
  • 子元素设置 scroll-snap-align: center 或 start，定义对齐位置
  • 适合全屏滚动、轮播图、卡片滑动等场景，替代部分 JS 轮播方案
  • 原生实现性能好、手感自然，但定制化程度比 JS 方案低，需根据需求选择

效果说明

CSS scroll-snap-type 实现的滚动捕捉效果。滚动时会自动吸附到每个子元素的位置，类似原生 App 的整屏滑动体验。纯 CSS 实现，无需 JS 控制滚动位置，配合底部指示器展示当前位置。