为了项目在移动端体验起来更加流畅,我们通常给元素设置 -webkit-overflow-scrolling: touch;
属性来实现,具体原因,CSS参考手册给了详细的解释
也就是说:这个属性是通过设置滚动的回弹效果,让页面在滑动的时候看起来流畅。
但当我在项目里面给 body
设置这个属性,同时给某个元素设置 overflow:scroll
,并且这个元素里面存在 fiexd
定位的子元素,此时发现,固定定位元素无法显示,即使我给固定定位的元素设置 z-index:980
来提高他的层级,问题依然存在。
刚开始以为是 ios
系统升级导致的,理由如下:
第一:这个 -webkit-overflow-scrolling: touch;
属性之前用过,但是没有遇到过今天所出现的定位元素无法显示的问题。
第二:这个问题在 ios
下才会存在,Android
不存在这个问题。
经过调试发现,如果去掉固定定位元素的父元素的 overflow:scroll
属性,定位元素就可以显示。但是通过去掉父元素滚动的属性来解决这个问题,不是一个好的方案。关键还是需要找到问题的本质原因。
经过研究发现,这个问题很早就存在,现在也一直存在,而且 Android
之所以不存在这个现象,是因为 Android
压根不支持 -webkit-overflow-scrolling: touch;
这个属性,而 ios
存在问题,恰恰是因为 ios
支持了这个属性,但是它处理的机制是:
如果一个元素同时存在 -webkit-overflow-scrolling: touch;
和overflow:scroll
属性,固定定位的元素会在容器发生滚动的时候,跟着一起往上或者线下滚动,同时固定定位元素也就失去了固定定位的效果。所以这也就是上面为什么,我设置了z-index:980
依然无法解决问题 原因。