How to solve the problem of sliding lag on the mobile terminal in h5

The solution is as follows:

(Related video recommendations: html video tutorial)

1. ios side The -webkit-overflow-scrolling attribute can control the page scrolling effect. The settings are as follows to achieve inertial scrolling and elastic effects:

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

2. Caused by the box setting a height of 100%:

html,body{
height: 100%;
}

Replace the above Just delete the code.

3, If neither of these two methods works, there is another solution, which is to use the area sliding component in the mui component

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

Configure the value in scroll according to your actual situation.

Note: bounce: true must be true. If changed to false, the entire page will not be able to slide

Related recommendations: h5

The above is the detailed content of How to solve the problem of sliding lag on the mobile terminal in h5. For more information, please follow other related articles on the PHP Chinese website!