您现在的位置是:群英 > 开发技术 > web开发
HTML5移动端页面滑动卡顿怎么处理
Admin发表于 2022-05-14 17:06:371250 次浏览
相信很多人对“HTML5移动端页面滑动卡顿怎么处理”都不太了解,下面群英小编为你详细解释一下这个问题,希望对你有一定的帮助

 

解决方法如下:

1、ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果:

body{
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow-y: scroll;
}

2、由于盒子设置了高度100%引起的:

html,body{
height: 100%;
}

将上述代码删除即可。

3、如果这两种都还是不行的话,还有一种解决办法,就是使用mui组件里面的的区域滑动组件

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--这里放置真实显示的DOM内容-->
	</div>
</div>
<script>
mui('.mui-scroll-wrapper').scroll({
       scrollY: true, //是否竖向滚动
       scrollX: false, //是否横向滚动
       startX: 0, //初始化时滚动至x
       startY: 0, //初始化时滚动至y
       indicators: true, //是否显示滚动条
       deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
       bounce: true //是否启用回弹
});
</script>

根据你的实际情况配置scroll里面的值。

注意: bounce: true这个必须为true ,如果改为false后,整个页面就无法滑动了


感谢各位的阅读,以上就是“HTML5移动端页面滑动卡顿怎么处理”的内容了,通过以上内容的阐述,相信大家对HTML5移动端页面滑动卡顿怎么处理已经有了进一步的了解,如果想要了解更多相关的内容,欢迎关注群英网络,群英网络将为大家推送更多相关知识点的文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: h5滑动卡顿
相关信息推荐
2022-08-24 17:58:55 
摘要:在node中还有很多内置对象,可以帮助我们进行很多操作,包括对路径、文件等操作。下面本篇文章给大家介绍一下node常用内置模块中的path模块和fs模块,希望对大家有所帮助!
2022-11-30 18:00:40 
摘要:php导入csv乱码问题的解决办法:1、构造一个解析函数“function tb_str_getcsv($string, $delimiter=',', $enclosure='"') {...}”;2、读取文件到变量;3、通过“substr($s,2)”去掉BOM头即可。
2022-06-23 17:06:19 
摘要:在HTML5画布上有很多有趣的东西,请求动画框架和用JavaScript制作动画,今天的这篇文章给大家分享的内容是关于html5 canvas实现简单的双缓冲,有需要的朋友可以看一看文章中的方法。
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部