by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8580
本文可全文转载，个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。

一、Scroll Snap是前端必备技能

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

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

更多关于CSS Scroll Snap的内容可以参见我之前的文章：“大侠，要不过来了解下CSS Scroll Snap？”，对相关的CSS属性有详细的介绍。

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

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

关键CSS代码如下：

ul {
    width: 375px; height: 667px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    overflow-y: hidden;    
}
li {
    display: inline-block;
    width: 100%; height: 100%;
    scroll-snap-align: center;
}

滚动父容器元素设置scroll-snap-type:x mandatory，水平滚动，强制定位，子列表元素设置scroll-snap-align:center让列表在滚动容器的中间显示，于是效果达成。

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

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

对！肯定要出动JS辅助。

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

三、我的滚动中止检测方法

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

用JavaScript示意就是（这个实现已作废）：

// 定时器，用来检测水平滚动是否结束
var timer = null;
// 上一次滚动的距离
var scrollLeft = 0, scrollTop = 0;
// 滚动事件开始
container.addEventListener('scroll', function () {
    clearInterval(timer);
    // 重新新的定时器
    timer = setInterval(function () {
        if (container.scrollLeft == scrollLeft && container.scrollTop == scrollTop) {
            // 滚动距离相等，认为停止滚动了
            clearInterval(timer);
            // ... 做你想做的事情，如回调处理
        } else {
            // 否则，依然记住上一次滚动位置
            scrollLeft = container.scrollLeft;
            scrollTop = container.scrollTop;
        }
    }, 100);
});

如果你有兴趣，可以对上面代码进行进一步封装。

更新于翌日

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

// 定时器，用来检测水平滚动是否结束
var timer = null;
// 滚动事件开始
container.addEventListener('scroll', function () {
    clearTimeout(timer);
    // 重新新的定时器
    timer = setTimeout(function () {
        // 无滚动事件触发，认为停止滚动了
        // ... 做你想做的事情，如回调处理
    }, 100);
});

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

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

四、当前滚动目标元素检测方法

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

JS示意：

[].slice.call(container.children).forEach(function (ele, index) {
    if (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) {
        // 此刻的ele元素就是当前定位的元素
        // ... 你可以对ele做你想做的事情
    } else {
        // 此刻的ele元素不是当前定位的元素
    }
});

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

搞定了上面2个需要JS辅助的需求点，最终的效果就出来了。

五、最终实现的效果展示

您可以狠狠地点击这里：CSS scroll-snap滚动事件结束判断demo

此demo更适合手机端访问，故附上二维码：

最终实现效果如下视频所示（不动请点击）：

通过检测滚动结束，准确高亮当前展示的元素（通过CSS filter滤镜控制元素的grayscale灰度）。至于滑动与定位效果，完全交给CSS实现。比传统使用类似Swipe.js实现切换效果要简单很多，性能也更好，资源占用也更少。

六、结束语

毕竟是CSS新属性，一些老旧的Android手机兼容上确实有点问题，因为这样的原因，很多人望而却步，不敢使用这些优秀的特性。

大可不必，不能为了1%的糟粕牺牲99%的精华。

对于陈旧设备，我们可以不必完美一致的体验，只要保证功能完全正常就可以，用户其实不在意的。这一点上，可以好好和厂子的测试同学沟通沟通，没有必要所有浏览器都一样。

另外，对于scroll-snap-type等属性，是有polyfill的，引入一个JS即可。

如果polyfill也没用，大不了做个特征检测，如果浏览器不支持scroll-snap-type等属性，那就老老实实使用transform位移进行定位，或者专门再去加载个第三方JS处理。

越折腾越成长，适当给自己的项目增加点难度，多一点追求，技术成长就会比别人更快。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=8580

（本篇完）