如何停止CSS scroll-snap滚动事件并检测元素位置？

本文共计1481个文字，预计阅读时间需要6分钟。

Scroll Snap 是前端必备技能。CSS Scroll Snap 是一个非常好用的特性，可以让网页容器滚动停止时，浏览器自动平滑定位到指定元素的位置。类似幻灯片效果。

一、Scroll Snap是前端必备技能

CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。

而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使用。

二、源自实际项目的scroll-snap场景

今天下午在实现一个功能需求的时候，正好遇到一个场景非常适合使用Scroll Snap来实现，滑动依次显示人物角色。于是就大胆使用了下，哇，好棒，无需任何js做边界判断，滑动停止自动定位到想要的位置。