H5移动端切页及滚屏兼容问题,从swiper.js到自造轮子

由 夕空 撰写于  2022年11月3日

一开始,页面是用原生页面滚动屏幕,后来客户想要一屏一屏的切页,这个简单,直接上swiper.js,但从这里噩梦般的爬坑开始。。。

swiper.js前端插件届算是比较出名的,拥有多年的更新历史,使用起来也很简单,官网API说明齐全。

但令我没想到的是这个webkit核心大一统的时代,还存在兼容问题!
苹果手机的11版本全系不流畅,切屏时一顿一顿的,没办法,得解决。
在官网找到了
cssMode属性,使用后发现切页时由原来的transform位移,转原生滚动,并使用css的【scroll-snap-type】,也就是可以让滚动停滞位置固定,有兴趣的童鞋可以网上搜下这个属性,这里就不展开讲了。

是不是以为问题解决了?苹果11说我可以了,苹果10,确跳出来说:不!我无法使用!!

为什么?!苹果自家阵营的各版本手机还这样啊?!

只能猜测苹果10不支持scroll-snap-type属性了,实在没法深究原因了,既然原生滚动都流畅兼容,那我就自己造轮子!

思路

首先原生滑屏滚动要解决滑屏结束后的定位问题,移动端手指每滑一下,最后会有一段小位移,手指速度快了位移更远,还无法禁止,很难搞。

最终解决方案,禁止用户的滚动,手指滑动时触发滚动目标的transform位移,移动结束时归位0,将滚动位置附加刚刚移动的位置,最后在滚动指定位置实现切页。

终于!所有苹果手机都兼容了,都流畅了,都不卡了!!!

制作了DEMO,有缘人拿去吧:

https://gitee.com/flashme/scrolldrag

声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - H5移动端切页及滚屏兼容问题,从swiper.js到自造轮子


欢迎光顾我的小站!