美文网首页
webkit-overflow-scrolling-touch兼

webkit-overflow-scrolling-touch兼

作者: 代艳霞 | 来源:发表于2021-09-14 13:20 被阅读0次

    为了项目在移动端体验起来更加流畅,我们通常给元素设置 -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依然无法解决问题 原因。

    相关文章

      网友评论

          本文标题:webkit-overflow-scrolling-touch兼

          本文链接:https://www.haomeiwen.com/subject/ggmaahtx.html