safair 中使用-webkit-overflow-scrol

描述

-webkit-overflow-scrolling: touch; 的父元素中子元素超过父元素大小无法滚动。

方法一

1. iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理
2. 深入研究-webkit-overflow-scrolling:touch及ios滚动
3. -webkit-overflow-scrolling:属性

以上方法解决了大部分网友的问题，但是没有解决我的问题。

方法二

我用了vue-router，而且部分组件使用了keep-alive，只有从keep-alive的页面跳转到会有bug的页面，才会触发这个bug，而且刷新页面的话bug就消失了。

最后用js的方式解决了问题，但是滑动没那么顺畅了。原始代码来自网络做了部分修改，侵删（实在找不到原始网页了）。

    function need2fix() {
      let result = false
      try {
        // uaParser 是模块ua-parser-js
        const uaOs = uaParser(navigator.userAgent).os
        const version = Number(uaOs.version.split('.')[0])
        if (uaOs.name === 'iOS' && version < 12) {
          result = true
        }
      } catch (ex) {
        console.error('app: ', ex)
        result = true
      }
      return result
    }
    function touchScroll(id) {
      if (need2fix()) {
        console.warn('app: 适配safair，解决不能滑动的问题')
        let scrollStartPos = 0

        document.getElementById(id).addEventListener('touchstart', function(event) {
          scrollStartPos = this.scrollTop + event.touches[0].pageY
          // event.preventDefault()
        }, false)

        document.getElementById(id).addEventListener('touchmove', function(event) {
          this.scrollTop = scrollStartPos - event.touches[0].pageY
          // event.preventDefault()
        }, false)
      }
    }
    // warpperId 是使用了-webkit-overflow-scrolling: touch;的元素id
    touchScroll('warpperId')