-webkit-overflow-scrolling:touch导致ios中z-index失效(弹窗层级设置无效)

最新推荐文章于 2024-10-28 14:12:21 发布
最新推荐文章于 2024-10-28 14:12:21 发布
阅读量2k 收藏 2
点赞数
分类专栏： vant 文章标签： ios webkit html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39189369/article/details/122229099
版权
本文介绍了如何避免网页滚动卡顿问题，方法包括移除不必要的-webkit-overflow-scrolling:touch属性、将弹窗定位到顶层并调整样式，以及利用Vant组件的teleport和get-container属性。重点讲解了在Vant库中使用popup组件来解决滚动冲突的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决方法：

  1. 直接去掉-webkit-overflow-scrolling:touch[不合理，页面卡顿]
  2. 弹窗放到根位置，也就是跟遮布平级[根下不存在含有-webkit-overflow-scrolling:touch]
  3. 动态修改-webkit-overflow-scrolling:touch的样式值

  4. vant可以使用van-popup，添加teleport(3x)、get-container(2x) 的属性指定位置挂载(原理2一样)

说说你对-webkit-overflow-scrolling属性的理解
王铁柱666的博客
03-27 444
webkit-overflow-scrolling属性是前端开发中一个用于控制元素在移动设备上滚动行为的CSS属性。-webkit-overflow-scrolling属性用于控制元素在移动设备上是否使用滚动回弹效果。在前端开发中，-webkit-overflow-scrolling属性通常应用于需要提升滚动体验的场景，如移动端网页或Web应用中的滚动容器。综上所述，-webkit-overflow-scrolling属性是一个强大的工具，可以帮助前端开发者提升移动端应用的滚动体验。
-webkit-overflow-scrolling: touch兼容问题
dai_yanxia的博客
05-28 2187
为了项目在移动端体验起来更加流畅，我们通常给元素设置 -webkit-overflow-scrolling: touch; 属性来实现，具体原因,CSS参考手册给了详细的解释 也就是说：这个属性是通过设置滚动的回弹效果，让页面在滑动的时候看起来流畅。 但当我在项目里面给 body 设置这个属性，同时给某个元素设置 overflow:scroll，并且这个元素里面存在 fiexd 定位的子元素，此时发现，固定定位元素无法显示，即使我给固定定位的元素设置 z-index:980 来提高他的层级，问题依然存
深入研究-webkit-overflow-scrolling:touch及ios滚动
weixin_30731305的博客
12-14 1150
目录 1. -webkit-overflow-scrolling:touch是什么？ 2. 解决safari布局抖动的例子 2.1 方案一 2.2 方案二 3. 探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug ...
移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住
weixin_30245867的博客
12-19 1114
起因 起因 -webkit-overflow-scrolling 问题 解决方案： 方案一 方案二 思考为什么会出现这个问题 总结 故事的起因是，在一个多列表的页面上，页面在iOS11，跟iOS10中会发生页面卡住，不能进行滚动。 然后就怀疑是自己的样式写的出了问题，就一直排查定位元素的样式，怎么都找不到问题所在。 ...
ios下使用-webkit-overflow-scrolling:touch带来的bug
weixin_40398051的博客
12-22 1182
在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素，随着页面一起滚动，只有滚动停止时才会恢复原位.1 设置你需要滚动的div的position: relative; -webkit-overflow-scrolling: touch;以及高度 2，底部就用absolute 来定位，这样就不会随着滚动了。
IOS 的z-index 失效的原因
极客神殿
05-17 4545
罪魁祸首就是它=====>iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效 调了超久，还用了safari的真机调试才找出来，心累。。。 IOS下z-index失效问题 1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ 2.在ios上，则相反，translateZ的优先级要高于zindex 3.所以最好在设置一系列元素时，zin
ios上面浏览器使用z-index失效
风烟
12-16 717
发现是父元素使用了这个属性 -webkit-overflow-scrolling: touch; 导致z-index失效。去掉这个属性就行了。
ios 上滚动优化与 z-index 不兼容问题
flynn_
10-10 812
设置 overflow: auto; 后，在ios环境下，页面滚动会有卡顿的感觉，通过设置-webkit-overflow-scrolling: touch;优化体验。 但是这样会导致在其容器内部元素身上的z-index属性就会失效。注意这里指的是其内部元素z-index 失效。也就是说，如果pop层在容器外，那么将不会受到影响。 /*优化ios上的滚动体验*/ -webkit-overflow-scrolling: touch; /*ios环境下： 容器添加上面属性， 容器内部元素身上的 z-index
uniapp ios scroll-view中z-index失效的问题
weixin_53236070的博客
10-28 685
uniapp ios scroll-view中z-index失效的问题
使用 scroll-view 不管用
最新发布
03-18
| iOS卡顿 | 是否启用弹性滚动 | 添加`-webkit-overflow-scrolling: touch` | | 安卓白屏 | 硬件加速问题 | 添加`transform: translateZ(0)` | | 滚动时头部抖动 | 滚动事件频率过高 | 添加防抖逻辑 | | 小程序加载...
深入探究iOS下fixed定位导致的问题
weixin_34198881的博客
08-04 2366
讨论背景 众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离；页面滚动，fixed元素消失等）。这些表现过于离奇，显得没有逻辑，一时间很难找到对应的解决方案。所以笔者决定从一个简单列表页出发，把遇到的各种奇怪问题都罗列出...
记录一次ios下fixed区域中滚动内容滑动到底部/顶部后不可滑动的问题修复
u012439689的博客
12-31 3284
如题，ios多机型，h5的页面制作的一个展示列表，外部采用fixed布局固定显示了表头筛选项的一些东西，然后中间是内容可滚动区，如下图，然后ios的机型会出现的问题就是，滚动到顶部或者底部再用力划一下的话（等到内部滚动区域滚动条消失），滚动就会被卡住，滚不动了 ...
-webkit-overflow-scrolling:touch
gxr的博客
07-03 837
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。<!DOCTYPE html> <...
IOS safari浏览器中出现的z-index不生效的层级问题
weixin_45072479的博客
11-29 1582
2.设置-webkit-overflow-scrolling touch改为-webkit-overflow-scrolling unset。参考链接：https://huaweicloud.csdn.net/64ec52a02ea0282871eab03c.html。开发中遇到了，弹窗组件和tab组件同时存在，在安卓上弹窗在tab上层，但在ios上，tab盖在了弹窗组件上层。3.也有说设置z-index时候设置transform，但对我无效。1.把弹窗组件挂载到body上。
一次解决ios中z-index属性失效问题的经历
id_ip的博客
06-03 4059
在一次用h5实现app页面功能中，ios系统发生如下bug 问题 整个页面都被遮罩盖住，但是我检查了代码，发现遮罩的z-index=2,而全部科目区域的z-index=3，按道理讲，全部科目的区域应该是在遮罩的上方，但是在ios中显示错误，在安卓手机上显示正常。 然后查了一些资料，其中看到如下博客，才解决了问题 https://blog.csdn.net/zilvzsy/article/details/86022612 最主要的原因是全局样式-webkit-overflow-scrolling属性设置
ios下使用-webkit-overflow-scrolling出现卡顿无法滑动的bug解决
热门推荐
安静先生的博客
07-05 1万+
现在做的小程序项目需要适配iphoneX,所以不再使用page自身的滚动，需要在判断是iphoneX机型下把view底部留白34px;34px是避开iphoneX底部的操作范围，以下代码同样适用H5。实现方法：最外层用content包裹滚动，默认情况下滑动时手指松开即停止滑动。为了实现顺滑滚动，加上这句代码：-webkit-overflow-scrolling: auto | touch;auto...
ios 滚动页面卡住 和 -webkit-overflow-scrolling:touch 的关系
写代码的女生酷不酷
08-31 7392
起因 -webkit-overflow-scrolling:touch 相信写移动端的人都知道这个，可以让滚动更流畅，请你使用的时候也要知道它的巨坑。。。(来自 线上 bug 的痛) 场景 bug 模仿 ant-design mobile 写了一个拉动刷新。 你们自己用手机打开连接，人家就没有用滚动优化， 为什么没有用，就是有坑！！！ 自从加了 -webkit-overflow-scro...
关于 -webkit-overflow-scrolling:touch 的小bug
pan396365044的博客
12-30 9238
最近在写页面时遇到一个页面长度刚刚超过手机高度一点，所以页面这时是可以上下滑动的，在安卓手机上滑动很流畅，但是在苹果手机上下滑动时会出现卡顿回弹等现象导致不流畅；故我给body加了body{ -webkit-overflow-scrolling:touch; } 此时苹果手机滑动也流畅了，但是带来一个bug，页面中我有一处弹窗，弹窗的高度是刚好100%的，而且弹窗出现底部内容是不能滑动的，
ios overflow: scroll卡顿 -webkit-overflow-scrolling:touch的bug多，解决方案
秋刀鱼笛滋味
04-17 1270
前段时间开发公司移动端官网（m.rys.cn ，vue+vux开发），遇到的ios下滑动卡顿，没有惯性的问题 百度之后： -webkit-overflow-scrolling:touch，很快解决了问题， 但是 它让z-index transform属性失效 ,严重影响了页面的布局问题，各种方法使用之后都不行， 最后用 better-scroll插件来滑动，基本解决问题，由于安卓本来就没问题，...
-webkit-overflow-scrolling: touch;
06-28
### 回答1： -webkit-overflow-scrolling: touch; 是一个CSS属性，用于在移动设备上实现平滑的滚动效果。它可以应用于具有滚动内容的元素，例如 div 或 iframe。当用户在移动设备上滚动该元素时，它将以流畅的方式滚动，而不是像默认滚动一样卡顿。 ### 回答2： -webkit-overflow-scrolling:touch;是一个CSS属性，用于移动设备的浏览器中控制页面滚动的行为。当一个页面在移动设备上被访问时，其内容有可能会超过设备屏幕的大小，此时就需要滚动来查看页面内容。但是，在移动设备上的滚动效果相较于在桌面电脑上的体验要差很多，因为它们通常会有卡顿、慢反应或跳跃等不良效果。这样的效果会影响用户的体验，因此必须要采用一些方法来改善这种情况。 -webkit-overflow-scrolling:touch;可以帮助我们实现流畅的滚动效果，消除卡顿、慢反应和跳跃等问题。这个属性是仅适用于 Webkit 内核的，因此在移动设备上使用较为广泛。它会在页面滚动时使用硬件加速来优化滚动性能，从而实现更加平滑、自然的滚动。 这个属性使用起来非常简单，只需要将它添加到滚动区域的 CSS 样式中即可。例如： #scrollable { height: 150px; -webkit-overflow-scrolling: touch; overflow-y: auto; } 在这个例子中，页面中的一个元素被定义为滚动区域。当使用触摸设备滚动时，-webkit-overflow-scrolling:touch;会生效，从而确保滚动平滑自然。 总之，-webkit-overflow-scrolling:touch;是一个非常有用的属性，它可以提高移动设备上页面滚动的性能和用户体验。无论是开发移动网站还是移动应用，我们都应该考虑使用这个属性来改善用户体验。 ### 回答3： -webkit-overflow-scrolling: touch;是一个CSS属性，用于在屏幕上启用流畅的滚动功能。它主要应用于移动设备上的网页浏览器。通过启用此属性，用户可以在触摸屏上轻松地使用手指来滚动页面，而不会出现卡顿或延迟的情况。 该属性只能在Webkit浏览器中使用，以确保兼容性。它适用于大多数常见的移动设备和平板电脑，包括iPhone, iPad, Android手机和平板电脑等。 此属性的主要目的是优化网页在移动设备上的用户体验。由于移动设备的屏幕尺寸通常较小，因此需要在较小的屏幕上显示更多的内容。通过使用此属性，用户可以轻松地滚动网页并捕捉所需要的内容，而无需缩放视图或调整字号。 此外，-webkit-overflow-scrolling: touch;还可用于增强应用程序的用户体验。例如，在移动应用程序中，可以使用此属性使用户可以轻松地滚动列表或其他元素。 总之，-webkit-overflow-scrolling: touch;是一种对网页和应用程序的特殊效果，可以在移动设备上改善用户体验。它通过启用流畅的滚动功能，让用户可以轻松地浏览内容，缩小了移动设备和桌面网页之间的差距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值