ios h5页面滚动卡顿的解决办法

最新推荐文章于 2023-06-15 15:08:18 发布
最新推荐文章于 2023-06-15 15:08:18 发布
阅读量3.3k 收藏
点赞数
文章标签： h5页面滑动 滑动卡顿
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/84825283
版权

开发微信公众号网页的时候发觉iOS系统滑动页面的时候会特别卡顿，但是安卓就比较流畅。

网上搜索发觉有这个css属性可以设置iOS滑动不卡顿

-webkit-overflow-scrolling: touch

不过看文档也提示说尽量少用这个特性，但是实在无法解决的情况下还是用这个了。

woshidamimi0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iScroll 5 移动端 局部滚动插件
07-07
在iOS平台上，由于浏览器对触摸事件的处理方式，原生的滚动可能会出现卡顿或延迟，而iScroll 5通过优化和自定义滚动逻辑，能够提供更好的交互体验。 iScroll 5主要知识点包括： 1. **事件处理**：iScroll 5支持...
uni-app:从运行原理上面解决性能优化问题
01-27
【uni-app】是一款多端开发框架，它允许开发者编写一次代码，就能运行在iOS、Android、Web等不同平台上。然而，由于其非原生的特性，可能会遇到性能问题，这在React Native、Flutter等框架中也同样存在。本文将探讨...
【bug】—— H5页面在 ios 端滑动不流畅的问题
weixin_30256901的博客
03-13 315
IOS系统的惯性滑动效果非常6，但是当我们对div加overflow-y:auto;后是不会出这个效果的，滑动的时候会感觉很生涩。怎么办？ 方案一： 在滚动容器内加-webkit-overflow-scrolling: touch 但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。 方...
ios h5页面滑动不流畅
qq_42115928的博客
12-03 231
h5页面在ios上，部分滚动区域会出现滑动僵硬，不流畅的问题。 解决方案： 在滑动区域加上css -webkit-overflow-scrolling: touch;
h5在页面滚动在ios上卡顿的问题
xzzfxz的博客
10-21 431
在需要滚动的容器上添加css属性： -webkit-overflow-scrolling:touch;
h5在iOS上滑动卡顿问题
baidu_40537062的博客
09-24 500
在css文件的html标签中加上 -webkit-overflow-scrolling: touch; 如： html{ position: absolute; top:0; left: 0; width: 100%; height: 100%; -webkit-overflow-scrolling: touch; } ...
H5页面在IOS设备上滑动卡顿问题
zhangx
07-23 831
IOS 端特属属性，手指离开屏幕会保持滚动一段距离，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 overflow: scroll; //该属性随着手指离开立即停止 -webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动 ...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
native 的抖动是由于 iOS 中的 viewport跟着动引起的，而 h5 的抖动是由于 WebKit 浏览器的滚动回弹效果引起的。 解决 native 抖动的方法是将参数 bounce_disable 设置为 1，以禁止 native 的弹性效果。然后，加上 ...
微信小程序中遇到的iOS兼容性问题小结
12-12
2. **iOS中滚动卡顿问题** iOS设备上的滚动体验可能不如预期流畅，这通常是因为默认的滚动机制导致的。为了优化滚动性能，可以为需要滚动的容器添加`-webkit-overflow-scrolling: touch;`样式属性。这将启用硬件...
pdf在线预览，适用于pc, android, ios
05-06
`pdfjsmin`这样的库提供了在Web环境中实现这一功能的基础，开发者可以通过集成和定制这些库来构建自己的PDF在线预览解决方案。同时，`readme.txt`文件可能包含了关于如何使用`pdfjsmin`的说明和示例代码，帮助开发者...
解决 h5 页面在 ios 系统中滑动不流畅
LonewoIf的博客
02-20 1663
在移动端项目时，在滚动容器上用 overflow-y: scorll; 属性时发现页面滚动不流畅，很慢。 解决办法：可以使用 -webkit-overflow-scrolling: touch;这个属性，使滚动条产生滚动回弹的效果，就像 ios 原生的滚动条一样流畅。 MDN 上的解释： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。 aut...
【h5】ios下网页滚动不流畅
最新发布
xilejie的博客
06-15 428
加在最外层的容器里， vue项目中的app 或者html、body中使用。
H5页面在ios上经常卡住怎么办
csx blog
12-08 858
H5页面上用了position:fixed, 在ios上滑动页面到底部，再连点几下，页面就会卡住，刚测试过 参考：https://segmentfault.com/q/1010000017416765
H5页面在ios手机滑动卡顿问题
TeroZhang的博客
11-23 2891
在我们开发中，H5页面多多少少会在外部打开，比如微信，钉钉，那么就会存在一些意想不到的bug！此次主要针对移动端H5页面在iOS端产生的 橡皮回弹（橡皮筋效果）造成滑动卡顿问题做一下相关记录，希望对遇到类似问题的同学有所帮助。
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-06 1635
在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。
-webkit-overflow-scrolling解决移动端iOS滚动卡顿现象
哈哈hyc的博客
08-12 1483
css3中-webkit-overflow-scrolling使用方法 -webkit-overflow-scrolling: touch; //有回弹效果 -webkit-overflow-scrolling: auto; //滑到哪停到哪 实现滚动回弹效果的页面布局 (实战) html <div class="containBox no-scrollbar"> ...
关于移动端H5滑动卡顿问题
sun_4200的博客
09-08 575
关于移动端H5滑动卡顿问题 最近在项目里增加了滑块验证码，样子如下图。 然后滑动的时候总是卡顿，分析原因之后，发现是没有阻止浏览器的默认行为，所以添加了如下代码解决了问题。 window.addEventListener('touchmove', (e)=> { e.preventDefault() }, { passive: false }) ...
h5 滑屏卡顿问题原因及解决方法
weixin_41439996的博客
06-21 6218
最近碰到一个问题，就是安卓滑屏的时候很流畅，IOS滑屏时有时会卡顿，后来查博客找到了解决方法，也顺便记录了下来！ 存在原因1： html,body{ height: 100%; } 解决方法：将此代码删除即可！ 存在原因2： *{ -webkit-overflow-scrolling: touch; } 解决方法：将上述css代码添加到css文件里即可！ 目前...
css中overflow滑动效果在IOS中不流畅
系咩的个人收藏博客
10-12 1367
最近做一个项目的分类页,发现滚动在安卓机子上非常流畅,但是在IOS设备上异常的缓慢,就跟触摸屏不灵敏一样 后面加上这个标签就问题解决了,如丝般顺滑! -webkit-overflow-scrolling: touch; 百度说这句语句是启动了硬件加速的特性，所以滑动起来会非常流畅；不过会影响性能； 但是并没有太大的影响.完美解决了!
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值