h5怎麼解決行動端滑動卡頓的問題

解決方法如下：

（相關影片推薦：html影片教學）

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(&#39;.mui-scroll-wrapper&#39;).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怎麼解決行動端滑動卡頓的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！