ios下使用-webkit-overflow-scrolling:touch带来的bug

最新推荐文章于 2025-05-13 09:22:56 发布
原创 最新推荐文章于 2025-05-13 09:22:56 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ios #bug #苹果

本文介绍如何在苹果手机上解决-webkit-overflow-scrolling:touch导致的固定定位元素随页面滚动的问题。通过设置特定CSS属性，确保滚动效果平滑的同时保持布局稳定。

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

在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素，随着页面一起滚动，只有滚动停止时才会恢复原位.

1 设置你需要滚动的div的position: relative; -webkit-overflow-scrolling: touch;以及高度
2，底部就用absolute 来定位，这样就不会随着滚动了。

-webkit-overflow-scrolling:touch; ios橡皮筋效果卡屏，滚动穿透 --已解决
fly_wugui的博客
05-30 2690
-webkit-overflow-scrolling 属性 MDN中概述 入下 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. 值选项 1、auto 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止 2、touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的...
深入研究-webkit-overflow-scrolling:touch及ios滚动
weixin_44415368的博客
07-27 191
-webkit-overflow-scrolling:touch是什么？ *MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动...
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题解决
weixin_43109722的博客
05-13 349
当子组件弹出时，动态设置scroll-view的属性：-webkit-overflow-scrolling为auto即可。注：这个问题只出现在ios端，安卓和h5没有问题。
-webkit-overflow-scrolling:touch
zxz86的博客
12-29 1675
使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。1.-webkit-overflow-scrolling:touch控制元素在移动设备上面是否有滚动回弹效果，属性为auto、touch。3.保证使用该属性的元素上没有设置定位,如果出现偶尔卡住不动的情况，那么在使用该属性的元素上。属性后，你会发现，滑动几次后可滚动区域会卡主，不能在滑动，这时给元素增加个。: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
overflow-scrolling：touch bug
学无的博客
07-01 598
当你给一个元素设置过position:absolute;或者position:relative;后再增加-webkit-overflow-scrolling: touch;属性后，你会发现，滑动几次后可滚动区域会卡主，不能在滑动，这时给元素增加个z-index值就可以了。 -webkit-overflow-scrolling: touch; position:absolute; z-index:1; ...
uniapp ios scroll-view中z-index失效的问题
weixin_53236070的博客
10-28 841
uniapp ios scroll-view中z-index失效的问题
'backdrop-filter' is not supported by Safari. Add '-webkit-backdrop-filter' to support Safari 9+.
最新发布
06-10
-webkit-overflow-scrolling: touch; } } ``` **关键要点**： 1. **双属性并存**：同时使用`backdrop-filter`和`-webkit-backdrop-filter` 2. **版本支持**： - Safari ≥ 14支持无前缀 - iOS ≥ 13需要带前缀...
overflow:auto兼容性写法
09-24
例如，当在iOS设备上，可以使用-webkit-overflow-scrolling: touch来实现更流畅的滚动效果。 以上就是overflow:auto的兼容性写法的一些方法。根据具体的需求和浏览器的兼容性要求，选择合适的方法来实现元素内容的...
深入研究-webkit-overflow-scrolling:touch及ios滚动 overflow-y: scroll;
weixin_30731287的博客
06-28 411
在移动端上，在你用overflow-y:scorll属性的时候，你会发现滚动的效果很木，很慢，这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移...
移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住
weixin_30245867的博客
12-19 1136
起因 起因 -webkit-overflow-scrolling 问题 解决方案： 方案一 方案二 思考为什么会出现这个问题 总结 故事的起因是，在一个多列表的页面上，页面在iOS11，跟iOS10中会发生页面卡住，不能进行滚动。 然后就怀疑是自己的样式写的出了问题，就一直排查定位元素的样式，怎么都找不到问题所在。 ...
-webkit-overflow-scrolling:touch导致ios中z-index失效(弹窗层级设置无效)
qq_39189369的博客
12-30 2080
解决方法： 直接去掉-webkit-overflow-scrolling:touch[不合理，页面卡顿] 弹窗放到根位置，也就是跟遮布平级[根下不存在含有-webkit-overflow-scrolling:touch] 动态修改-webkit-overflow-scrolling:touch的样式值 vant可以使用van-popup，添加teleport(3x)、get-container(2x) 的属性指定位置挂载(原理2一样) ...
小程序 input键盘弹出时，滚动页面，输入框内容错位问题
lgh_ss的博客
05-28 3801
在ios9.+的版本上，遇到了一个问题。在键盘弹出的时候，快速滚动页面，输入的内容或input提示语会错位。且有时无法恢复到原有位置。当然，前提是你这个页面是超过一屏需要滚动的时候 解决办法： 1 页面可通过样式的滚动（overflow-y: auto）来写，但是不要用 -webkit-overflow-scrolling: touch; 2页面用scroll-view,通过变量{sysScroll}来控制 view: <scroll-view scroll-y="{{sysScroll}}"
ios上面浏览器使用z-index失效
风烟
12-16 735
发现是父元素使用了这个属性 -webkit-overflow-scrolling: touch; 导致z-index失效。去掉这个属性就行了。
IOS safari浏览器中出现的z-index不生效的层级问题
weixin_45072479的博客
11-29 1686
2.设置-webkit-overflow-scrolling touch改为-webkit-overflow-scrolling unset。参考链接：https://huaweicloud.youkuaiyun.com/64ec52a02ea0282871eab03c.html。开发中遇到了，弹窗组件和tab组件同时存在，在安卓上弹窗在tab上层，但在ios上，tab盖在了弹窗组件上层。3.也有说设置z-index时候设置transform，但对我无效。1.把弹窗组件挂载到body上。
一次解决ios中z-index属性失效问题的经历
id_ip的博客
06-03 4083
在一次用h5实现app页面功能中，ios系统发生如下bug 问题 整个页面都被遮罩盖住，但是我检查了代码，发现遮罩的z-index=2,而全部科目区域的z-index=3，按道理讲，全部科目的区域应该是在遮罩的上方，但是在ios中显示错误，在安卓手机上显示正常。 然后查了一些资料，其中看到如下博客，才解决了问题 https://blog.youkuaiyun.com/zilvzsy/article/details/86022612 最主要的原因是全局样式-webkit-overflow-scrolling属性设置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值