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,(大概率)会恢复滚动。

参考

发表评论

电子邮件地址不会被公开。 必填项已用*标注