CSS/HTML

推荐列表 站点导航

当前位置:首页 > 脚本编程 > CSS/HTML >

h5怎么解决移动端滑动卡顿的问题

来源:网络整理  作者:  发布时间:2020-12-17 01:38
本文为大家分享了h5解决移动端滑动卡顿的问题的方法,具有一定的参考价值,希望能够帮助到大家。...

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

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

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

<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里面的值。

html,body{ height: 100%; }

将上述代码删除即可。

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

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

相关热词: 解决

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/4675.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

h5怎么解决移动端滑动卡顿的问题

2020-12-17 编辑:

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

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

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

<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里面的值。

html,body{ height: 100%; }

将上述代码删除即可。

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

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

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jiaob/cssm/4675.shtml

相关文章

风云图片

推荐阅读

返回CSS/HTML频道首页