モバイル ウェブアプリは、あらゆる場所でスムーズな動作に反応し、 。作成は簡単でなければなりませんが ブラウザはスクロール中のタップイベントに反応しますが、 TouchEvent 仕様で詳細を確認してください。として アプローチは大きく分けて 4 つのカテゴリに分類できます。この スクロールの滑らかさの提供と デベロッパーが制御します。
タッチイベント処理には 4 種類のモデルがありますか。
ブラウザ間の動作の違いは、次の 4 つのモデルに分けられます。
通常の同期イベント処理
スクロール中に Touchmove イベントが送信され、各スクロール更新は touchmove 処理が完了するまでブロックされます。これは、最も理解しやすく、最も強力でありながらも、スクロールのパフォーマンスには適していません。これは、スクロール中の各フレームがメインスレッドでブロックされることになるためです。
ブラウザ: Android ブラウザ（Android 4.0.4、4.3）、Mobile Safari（div のスクロール時）
非同期 touchmove 処理
Touchmove イベントはスクロール中に送信されますが、スクロールは非同期的に進行できます（スクロール開始後、touchmove イベントは無視されます）。「二重の処理」が発生する可能性があります。たとえば、ウェブサイトで touchmove が実行された後、スクロールを続け、イベントで preventDefault を呼び出して、ブラウザに処理しないように指示します。
ブラウザ: Mobile Safari（ドキュメントのスクロール時）、Firefox
スクロール中にタッチ移動が抑制される
Touchmove イベントはスクロールの開始後には送信されず、touchend イベントが完了するまで再開されません。このモデルでは、静止したタッチとスクロールの違いを区別するのは困難です。
ブラウザ: Samsung ブラウザ（mousemove イベントの送信）
スクロール開始時のタッチキャンセル
スクロールの滑らかさとデベロッパーによる制御という両方を使用することはできません。このモデルでは、ポインタ イベント仕様のセマンティクスと同様に、スムーズ スクロールとイベント処理のトレードオフを明確にします。スワイプして更新するなど、指を動かす操作が必要になる場合もあります。
ブラウザ: パソコン版 Chrome M32 以降、Chrome Android
変える理由
現在 Chrome for Android が Chrome の旧モデルを使用: スクロール時のタッチキャンセル スクロールのパフォーマンスは向上しますが、デベロッパーの混乱につながります。 特に、一部のデベロッパーは touchcancel イベントや、 一部の Web サイトが機能しなくなっていますさらに重要なのは UI のスクロール効果と動作（プルして更新など）のクラス全体 隠れたバー、スナップ ポイントは実装が困難または不可能 あります
これらの効果をサポートするためにハードコードされた機能を追加するのではなく、 Chrome はプラットフォーム プリミティブの追加に力を入れており、 直接実装することをおすすめしますRational Web Platform をご覧ください。 をご覧ください。
Chrome の新しいモデル: スロットル非同期 Touchmove モデル
Chrome の新しい動作の導入
他のブラウザ用に記述されたコードとの互換性を
スクロール操作にも対応しています
。この機能はデフォルトで有効になっており、必要に応じて
フラグ chrome://flags\#touch-scrolling-mode でオフにします。
新しい動作は次のとおりです。
- 1 つめの touchmove が同期的に送信され、スクロールが可能になります。 キャンセル済み
- アクティブなスクロール中
<ph type="x-smartling-placeholder">
- </ph>
- touchmove イベントが非同期で送信される
- 200 ミリ秒あたり 1 イベントにスロットリングするか、CSS の 15px スロップ領域に 超過
- Event.cancelable は false です。
- それ以外の場合、アクティブなスクロール時に touchmove イベントが通常どおり同期的に呼び出されます。 終了するか、スクロールの限界に達したため実行できない
- タッチエンド イベントは常にユーザーが指を離すと発生します
Android 版 Chrome でこちらのデモをお試しください。
chrome://flags\#touch-scrolling-mode フラグを使用して違いを確認します。
ご意見をお寄せください
非同期 Touchmove モデルにより、ブラウザ間での移動が改善される可能性がある 新しいクラスのタップ操作効果を有効にできます。お問い合わせ 開発者の考え方や クリエイティブな作業を できます。