项目中给某个带滚动条的元素添加了 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
属性,其元素会在容器发生滚动的时候,跟着一起往上或者线下滚动,从而导致页面缺失。
解决办法:只需要在公共样式加入下面这行代码
*{
-webkit-overflow-scrolling: touch;
}
但是这种方法,如果元素过多过杂的情况下,可能会出现一些其他兼容性问题,目前没有找到更好的解决办法。