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怎么解决移动端滑动卡顿的问题的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

h5和小程序有什么区别

html5 网络拓扑图应用实例讲解

h5项目开发ios插件功能的实例代码

如何让html5实现移动端复制功能

html5容易被忽略的小知识

必会的移动端html5的基础知识点

html5拖放的实现方法

h5自定义audio的解析

html5让图片转圈的动画效果的实现方法介绍

html5中返回音视频的当前媒体控制器的属性controller

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




打赏

取消

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

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

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

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

评论

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