记录:关于苹果端IOS系统webkit-overflow-scrolling-touch不显示元素的兼容性问题

2023-03-30 20:46:03 浏览数 (1)

项目中给某个带滚动条的元素添加了 overflow:scroll以及 -webkit-overflow-scrolling: touch;

-webkit-overflow-scrolling: touch;MDN定义

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

此时元素在安卓和PC端正常显示,但在部分机型,小米、苹果端不显示。

这个问题很早就存在,现在也一直存在,而且 Android 之所以不存在这个现象,是因为 Android 压根不支持 -webkit-overflow-scrolling: touch; 这个属性,而 ios 存在问题,恰恰是因为 ios 支持了这个属性,但是它处理的机制是:

如果一个元素同时存在 -webkit-overflow-scrolling: touch;overflow:scroll属性,其元素会在容器发生滚动的时候,跟着一起往上或者线下滚动,从而导致页面缺失。

解决办法:只需要在公共样式加入下面这行代码

代码语言:javascript复制
*{
-webkit-overflow-scrolling: touch;
}

但是这种方法,如果元素过多过杂的情况下,可能会出现一些其他兼容性问题,目前没有找到更好的解决办法。

0 人点赞