IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题

需求场景是在一个使用绝对定位布局的页面中，动态渲染一个可以滑动的子模块。

开发的时候在电脑 Chrome 上面调试没问题，安卓手机和常规 IOS 版本测试了也没问题，但是由于苹果最近更新了新的系统版本（14），在新版本上出现了滚动滑动不了的问题。

有问题的版本

.fa-box {}
.list-box {
    width: 100vw;
    overflow-x: scroll;
    overflow-y: hidden;
}
.list-item {}

尝试的方案一

在需要滑动的父元素上完善 CSS 属性：

.fa-box {
    width: 100vw;
    height: 168px;
    overflow: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.list-box {
    min-width: 101vw;
    height: 146px;
}
.list-item {}

思路是预设一个更大的子元素，而不是等服务器返回的数据动态渲染，自动撑开。

尝试的方案二

将这个子模块从绝对定位中拆出来，尝试后发现丝滑般的体验，可惜因为历史技术架构原因，预估修改时间成本较高，就放弃了。

尝试的方案三

究其原因，还是渲染引发的锅，于是使用定时器不断重排重绘，规避这个问题。:(

const fn = () => {
  const el = document.getElementById('some-id')
  if (el && el.style) {
    if (el.style.overflow === 'auto') {
      el.style.overflow = ''
    } else {
      el.style.overflow = 'auto'
    }
  }
}
setInterval(fn, 300)

总结

此问题只会在 IOS 绝对定位场景中出现，如果是正常文档流，不会出现此问题；当帮父元素重新设置 overflow 属性，重新建立 ScrollView，（大概率）会恢复滚动。

参考

• iOS safari浏览器上overflow: scroll元素无法滚动bug深究