ios 上滚动优化与 z-index 不兼容问题

设置 overflow: auto; 后，在ios环境下，页面滚动会有卡顿的感觉，通过设置-webkit-overflow-scrolling: touch;优化体验。

但这样会导致其容器内部元素的z-index属性失效。注意这里指的是其内部元素z-index 失效。也就是说，如果pop层在容器外，那么将不会受到影响。

/*优化ios上的滚动体验*/
-webkit-overflow-scrolling: touch;
/*ios环境下： 容器添加上面属性， 容器内部元素身上的 z-index 属性会失效*/

并非由于 “从父原则” 导致

解决方案：

第一种：直接去掉-webkit-overflow-scrolling： touch 【不合理，因为页面卡顿了】

第二种：把小弹窗容器放到根下面，也就是跟遮布平级【因为放到根下面就不存在父级含有-webkit-overflow-scrolling】

第三种：动态修改-webkit-overflow-scrolling 样式内容值。【推荐】

// 1. 为滚动容器 设置ref= receivable
// 2. css 保持 -webkit-overflow-scrolling: touch; 初始化需要
// 3. 当点击弹窗时设置【在点击事件方法里调用下面的函数】：isTure代表一个参数，true表示点击打开，false表示关闭

setScollIOS(isTure) {
    this.$refs.receivable.style['-webkit-overflow-scrolling'] = isTure ? 'auto': 'touch';
}

动态设置webkit-overflow-scrolling样式，如果点击了弹窗，页面都被遮住了，卡不卡都没关系，所以设置auto，这时z-index有效，弹窗可以操作。当关闭弹窗时，设置成touch，页面滑动是正常不卡顿效果。

本文地址：https://blog.csdn.net/baidu_41828042/article/details/108995136