解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题

在iOS设备中,由于使用Safari内核,页面滚动时可能出现卡顿和内容显示不全。通过添加CSS属性`-webkit-overflow-scrolling:touch`可以启用回弹滚动效果,但此属性可能导致一些布局问题,如绝对定位的元素显示错乱。此属性提供了`auto`和`touch`两个值,后者允许更流畅的滚动体验。

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

在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后,卡顿导致如左图下面部分丢失。

Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。 

只需要在公共样式加入下面这行代码:

*{
  -webkit-overflow-scrolling: touch;/*解决IOS网页上下滑动卡顿缺失等问题*/
}

这个属性是有bug的,比如如果你的页面中有设置了绝对定位的节点,那么该节点的显示会错乱,当然还有会有其他的一些bug。 


-webkit-overflow-scrolling:touch是什么?

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。

auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值