web前端入门到实战：CSS：scroll-snap滚动事件停止及元素位置检测

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

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

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

　　然而，滚动定位结束后，还需要需要高亮当前定位的人物素材。我发现有些难办了！

　　以前这种滑动效果用JS实现，无论是JS动画结束，还是CSS动画结束，都是有回调函数可以使用的。但是这里却是滚动，而且滚动后还会自己再定位一会儿，自己定位时间有长有短，谁知道什么时候停止？有时候一口气滑多个元素，也不确定到底停止在哪个元素上。

　　实际上，标准制定者们和浏览器厂商正在积极推进Scroll Snap相关回调事件的落地，这样可以精确知道滚到什么时候停止以及滚动定位到哪个元素上，但是，标准还在折腾，浏览器还没有支持。项目现在就要用，怎么办呢？

　　实际上，就算不是Scroll Snap的使用场景，就算是普通的滚动，由于滚动具有惯性，检测滚动是否停止也是一个经常会遇到的需求。因此，有必要捋一个检测滚动什么时候停止的方法。

　　对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。 秋裙。从零基础开始怎么样学好前端。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端

　　检测元素的滚动是否停止，我的实现思路是这样的，在滚动事件中跑一个定时器，记录当前时间的滚动距离和上一次滚动的距离是否相等，如果相等则认为滚动已经停止，如果不相等，则认为滚动依然在进行。

　　滚动终止检测可以无需判断前后滚动距离是否相等，因为无论是惯性还是Snap定位scroll事件也是持续触发的。因此，可以直接这样：

　　当然，上面提供的方法并不是非常精准的中止检测，因为Scroll Snap最后的重定位浏览器自身有个检测，这个检测事件，根据我的反复研究与测试，应该是350ms（实际运行可能会略微大几毫秒），远比上面设置的100ms要大，因此，会有一次错误的冗余判断，发生在Snap定位开始之前。

　　我想了想，这个问题无法避免，但也不是什么大问题。总不可能设置400ms检测，延迟太高，体验不一定好。

　　原理如下，遍历所有的列表元素，检测列表元素的左边缘相对于滚动容器左边缘（如果是左对齐-scroll-snap-align:left）或中心（居中对齐）或右边缘（右对齐）的位置。当然，如果列表元素尺寸和滚动容器尺寸一致，则左中右边缘检测都可以。

　　严格来讲，应该计算是否等于0，而不是小于10，这里嘛，加了点容错区间吧。