解决iscroll在移动端卡顿
iscroll是模拟区域滚动的一个库,很有名的,类似的还有一个库叫better-scroll,作者是中国人,好像是阿里的吧,是在iscroll的基础上开发的,很灵活,支持es6等语法导入,不过本篇博文不做介绍,我们来讨论iscroll。
有一个需求是页面拒不缩放并且可以滚动,正好用到了iscroll-zoom.js,但是引入后发现在pc端嗷嗷流畅,但是移动端就卡顿,后来在网上查到解决办法,但是感觉并不是好的解决办法,应该还有更好的,暂时贴出现在的解决办法,以后在陆续跟进。
解决方法一
1.
1 2 3
| <style type="text/css"> * { touch-action: pan-y; } </style>
|
2.
1 2 3 4 5 6
| <script> window.PointerEvent = undefined; document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); </script>
|
3.
1 2 3 4 5 6 7 8 9 10 11
| <script> tabContentScroll = new IScroll("#tabContentWrapper", { tap: true, probeType: 2, deceleration: 0.001, vScrollbar: false });
</script>
|
4.
我觉得是最主要的,比如iscroll-zoom.js文件,我是用的是v5.2.0版本,大约在290行
1 2 3 4 5 6 7
| disablePointer : !utils.hasPointer, disableTouch : utils.hasPointer || !utils.hasTouch, disableMouse : utils.hasPointer || utils.hasTouch, disablePointer : true, disableTouch : false, disableMouse : true,
|
官网issus的解释
这个是在网络上找到的参考答案连接
解决方法二
既然v5.2.0有bug,那我们不用这个版本的,可以用以前的老版本啊。
可以查看历史版本等信息,我下载了v5.0.8这个版本,经过测试可用了。