iscroll移动端卡顿解决办法

javascript
  目录
  1. 1. iscroll移动端卡顿解决办法
    1. 1.1. 解决方法一
      1. 1.1.1. 1.
      2. 1.1.2. 2.
      3. 1.1.3. 3.
      4. 1.1.4. 4.
    2. 1.2. 解决方法二

解决iscroll在移动端卡顿

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
  });

　　// 初始化IScroll的时候，加上vScrollbar: false，最关键这句，不加这句，完成其他几点只可以改好Chorme的问题，安卓的问题解决不了！！！
</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，那我们不用这个版本的，可以用以前的老版本啊。

1
npm info iscroll

可以查看历史版本等信息，我下载了v5.0.8这个版本，经过测试可用了。

  工具库