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

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

let u = navigator.userAgent; //判断是ios就初始化插件
    this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
    if (this.isIOS) {
      this.initBscroll()
    }
 initBscroll () {
      this.$nextTick(() => {
        if (!this.scroll) {
          // eslint-disable-next-line
          this.scroll = new Bscroll(this.$refs.content, {
            startY: 0,
            startX: 0,
            scrollY: true,
            scrollX: false,
            click: true
          })
          this.scroll.scrollTo(0, 0)
        } else {
          this.scroll.refresh();
        }
      })
    },

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

找到问题是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();
  }
},