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, これら 2 つの方法のどちらも機能しない場合は、別の解決策があります。それは、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>

実際の状況に応じてスクロールの値を設定します。

注: bounce: true は true である必要があります。false に変更すると、ページ全体がスライドできなくなります。

関連する推奨事項: h5

以上がh5のモバイル端末のスライドラグの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。