为了项目在移动端体验起来更加流畅，我们通常给元素设置 -webkit-overflow-scrolling: touch; 属性来实现，具体原因,CSS参考手册给了详细的解释
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依然无法解决问题 原因。
网友评论