强大的CSS:scroll-snap滚动事件停止及元素位置检测

原创 高志飞 教程 css 103阅读 2019-05-23 13:46:24 举报

一、Scroll Snap是前端必备技能

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

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

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

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

关键CSS代码如下:

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

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

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

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

对!肯定要出动JS辅助。

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

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

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

用JavaScript示意就是(这个实现已作废):

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

更新于翌日

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

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

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

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

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

JS示意:

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

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

自己是一个五年的前端工程师,希望本文对你有帮助!

这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复