ios overflow: scroll卡顿 -webkit-overflow-scrolling:touch的bug多，解决方案

╰半橙微兮° 2021-09-19 00:16 354阅读 0赞

前段时间开发公司移动端官网（[m.rys.cn][] ，vue+vux开发），遇到的ios下滑动卡顿，没有惯性的问题  
百度之后： -webkit-overflow-scrolling:touch，很快解决了问题，  
**但是**  
它让z-index transform属性失效 ,严重影响了页面的布局问题，各种方法使用之后都不行，  
最后用 **better-scroll**插件来滑动，基本解决问题，由于安卓本来就没问题，低端手机用插件卡，  
只在ios设备用插件：  
部分代码

**但是**  
问题又来了，还是ios, 页面http://m.rys.cn/fdetail/233f8c931218c3107e01781ff5592117161，[产品详情页][Link 1]的立即咨询按钮，触发的弹窗出不来，

找到问题是ios下 better-scroll 插件用到的 transform:影响到了z-index属性，导致无效

最后只得在**触发弹窗的时候卸载 better-scroll 插件，关闭弹窗时又初始化它**，  
按照这个思路，利用vue bus总线机制，完美搞定

代码监听弹窗的开关

'info.modal' (val) {
          if (val) {
            this.$bus.$emit('changeScroll', true)
          } else {
            this.$bus.$emit('changeScroll', false)
          }
        }

mounted里面注册事件

this.$bus.$on('changeScroll', (o) => {
          this.destoryScroll(o)
        })

方法：

destoryScroll (o) {
      if (!this.isIOS) {
        return
      }
      if (o) {
        this.scroll.destroy()
        this.$refs.scroll.removeAttribute('style') // 无敌
      } else {
        this.scroll = new Bscroll(this.$refs.content, {
          startY: 0,
          startX: 0,
          scrollY: true,
          scrollX: false,
          click: true
        })
        this.scroll.scrollTo(0, 0)
        this.scroll.refresh();
      }
    },

[m.rys.cn]: http://m.rys.cn
[Link 1]: http://m.rys.cn/fdetail/233f8c931218c3107e01781ff5592117161