一开始，页面是用原生页面滚动屏幕，后来客户想要一屏一屏的切页，这个简单，直接上swiper.js，但从这里噩梦般的爬坑开始。。。
swiper.js前端插件届算是比较出名的，拥有多年的更新历史，使用起来也很简单，官网API说明齐全。
但令我没想到的是这个webkit核心大一统的时代，还存在兼容问题！
苹果手机的11版本全系不流畅，切屏时一顿一顿的，没办法，得解决。
在官网找到了cssMode属性，使用后发现切页时由原来的transform位移，转原生滚动，并使用css的【scroll-snap-type】，也就是可以让滚动停滞位置固定，有兴趣的童鞋可以网上搜下这个属性，这里就不展开讲了。
是不是以为问题解决了？苹果11说我可以了，苹果10，确跳出来说：不！我无法使用！！
为什么？！苹果自家阵营的各版本手机还这样啊？！
只能猜测苹果10不支持scroll-snap-type属性了，实在没法深究原因了，既然原生滚动都流畅兼容，那我就自己造轮子！
思路
首先原生滑屏滚动要解决滑屏结束后的定位问题，移动端手指每滑一下，最后会有一段小位移，手指速度快了位移更远，还无法禁止，很难搞。
最终解决方案，禁止用户的滚动，手指滑动时触发滚动目标的transform位移，移动结束时归位0，将滚动位置附加刚刚移动的位置，最后在滚动指定位置实现切页。
终于！所有苹果手机都兼容了，都流畅了，都不卡了！！！
制作了DEMO，有缘人拿去吧：
Comments | NOTHING