H5問題は、Android携帯電話上のブラウザで上に移動し、ページダウンすることはできません

1、CSSで次のスタイルを追加するとき、ページが通常のスライドを上下につながることができません

// css 文件
{ touch-action: none; }

このコード行は、ページが上下ノーマルスライドすることはできませんなります後、

解決策:デフォルトの値を変更し{ touch-action: auto; }たり転用スタイルを削除

理由:
CSS属性タッチアクション値説明:
オート
タッチイベントは、ズームなど、そのようなビューポートの平滑化としてどの操作を、決定するために、ブラウザによって要素に発生したとき。
どれも
タッチイベントは、要素上で発生し、何もしません。
パン-xが
1本指の翻訳ジェスチャーレベルを可能にしました。パン-Y、パンアップ、可能パンダウンおよび/またはピンチズームの組み合わせを。
パンは-yが
縦1本指翻訳ジェスチャーを有効にします。パン-X、パン左、可能汎右および/またはピンチズームの組み合わせ。
操作
ブラウザは、連続スクロールやズーム操作を可能にします。自動動作によってサポートされている任意の他の値がサポートされていません。パンとズームズームジェスチャーを有効にしますが、そのようなズームをダブルクリックなどの無効他の非標準的なジェスチャー、。ズーム機能を無効にするには、ダブルクリックしたときに、画面上のユーザーがクリック遅延生成ブラウザのクリックイベントの必要性を減らすことができます。これは、「パン-Xパン-yのピンチである (-zoom」 別名互換性自体にまだ有効)。
、左パンパン右、パンアップ、パンダウン
指定した方向1本指のジェスチャーで始まるをスクロール可能にします。ローリングスタートしたら、それはまだ、反対方向であってもよいです。ユーザが画面の表面を下に指をドラッグしている、同じ汎左が右に指をドラッグするユーザーを表すことを意味し、ノート、スクロール「アップ」(パンアップ)してください。簡単な表現がない限り、複数の方向は、組み合わせることができる(例えば、「パン左パン右 」 無効であるため、「汎X」単純、および「パン左パンダウン」効果)。
ピンチズーム
マルチフィンガーパンを有効にしてページをズーム。これは、変換値と組み合わせることができます。
リファレンスアドレス:タッチアクションの使用のために

2. CSSのオーバーフローに追加されます:隠された;
beyondが滑ることができない隠されたページにつながることができます。

	// css 文件
	{ overflow:hidden;}

このような理由のデフォルトのイベントtouchstart、touchmoveまたはtouchendイベントを防止するためにあります。3.問題JSフィールド、

// js文件
e.preventDefault();   //会阻止默认行为 

最後に、スライド動作を最適化

上下拉动滚动条时卡顿、慢

 body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
公開された58元の記事 ウォン称賛20 ビュー110 000 +

おすすめ

転載: blog.csdn.net/fly_wugui/article/details/89921796