这篇文章发布于 2019年04月20日,星期六,00:43,归类于 JS实例。 阅读 31845 次, 今日 1 次 11 条评论
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
(本篇完)
- CSSOM视图模式(CSSOM View Module)相关整理 (0.468)
- 大侠,请留步,要不过来了解下CSS Scroll Snap? (0.417)
- 纯CSS实现微信列表左滑显示按钮的交互效果 (0.390)
- 还算有点用的scrollTo和scrollBy两个JS API (0.167)
- 小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现 (0.160)
- DOM基础小测27期答疑文字版-窗体滚动二三事 (0.134)
- 划词评论与Range开发若干经验分享 (0.134)
- CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产 (0.115)
- 纯CSS实现任意格式图标变色的研究 (0.115)
- 第五届CSS大会主题分享之CSS创意与视觉表现 (0.115)
- CSS3 filter:drop-shadow滤镜与box-shadow区别应用 (RANDOM - 0.020)
可以
还行
我用微信访问 会出现抖动的情况,大佬是否能优化下呢
iOS还是Android?
我也是微信打开出现图片抖动,我是iphonex,抖动的还挺厉害的,来回滚动之后 还显示图片重新加载了,会有图片白屏的情况
亲测,小米note2上只有chrome上有效果
demo在手机上,如果只划1/4屏宽(小于1/2应该都会),回复内容会回复到选位置。但是会出现左右抖动,是什么造成的
这个就是检测固定时间内没有滚动吧,那为什么不用防抖呢,感觉是一样的
在上一篇ScrollSnap的demo里测试了一下,ScrollSnap也会触发scroll事件,因为本质上是scrollLeft改变,scrollLeft改变就会触发scroll事件,应该可以直接用防抖的吧?
你说的很有道理。
每次看完张老师的内容都收获良多,感谢张老师的分享!