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


本文摘自PHP中文网,作者V,侵删。

解决方法如下:

(相关视频推荐:html视频教程)

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

1

2

3

4

5

body{

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

overflow-y: scroll;

}

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

1

2

3

html,body{

height: 100%;

}

将上述代码删除即可。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<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后,整个页面就无法滑动了

相关推荐:h5

以上就是h5怎么解决移动端滑动卡顿的问题的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html5中关于音频与视频监听器应用的示例详解

h5新特性及网页布局实例

详细介绍html5中的新事件

html5单页面手势滑屏切换原理分析

html5触摸事件实现移动端简易进度条的实现方法

总结html5表单(二) input type 各种输入, 各种用户选择,上传

有关html5服务器推送事件的讲解

一定要注意常见的3种html5错误用法

html5 dialog使用详解

react移动端框架有哪些

更多相关阅读请进入《h5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...