处理ios的overflow滚动bug

本文探讨了一个在iOS设备上遇到的滚动流畅性问题,特别是在使用-webkit-overflow-scrolling属性时出现的滑动立即停止现象。文章尝试了多种解决办法,并最终提出了一种将滚动事件绑定到body元素上的替代方案。

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

先说说这个bug的场景

.container{
     height:100vh;
     overflow-y:scroll;  
}

没毛病,总有这种类似的情况,需要在容器内滚动,但是!这种容器内的滚动在ios上面处理的情况是类似于

-webkit-overflow-scrolling:auto;

什么意思?

就是滑动的时候,当手离开屏幕的那一刻,滚动立即停止(from MDN)

那网上也给出对应的解决方案就是在容器上设置一个

-webkit-overflow-scrolling:touch;

这种情况的话可以保证滚动流畅了。

但是!!!经常出现各种滚不动、卡死之类的,体验超级不好。

虽然网上也有给出各种解决方案

{
     height:calc(100%+1px);
     z-index:1;
}

但是。。。。然并卵,没用

=================================================================================

大爷不伺候了,那些要处理滚动事件什么的我还是绑到body上。。。

 

转载于:https://www.cnblogs.com/AlexBlogs/p/7928280.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值