Widely available 全主要ブラウザで対応済み。安心して使用できる。

touch-action

touch-action は CSS のプロパティで、タッチ画面のユーザーが要素のある領域をどのように操作できるか（例えば、ブラウザー内に組み込まれたズーム機能）を設定します。

既定では、パン（スクロール）およびピンチ操作はブラウザーとは独立して別に扱われます。ポインターイベントを使用するアプリケーションは、ブラウザーがタッチジェスチャーの扱いを始めるときに pointercancel イベントを受け取ります。ブラウザーがどのジェスチャーを扱うかについての具体的に定義することによって、アプリケーションはジェスチャーを記憶するために pointermove および pointerup リスナーの中で独自の振る舞いを提供することができます。タッチイベントを使用するアプリケーションは、 preventDefault() を呼び出すことでブラウザーがジェスチャーを扱うのを無効にすることができますが、イベントリスナーが呼び出される前に、 touch-action を使用してブラウザーにアプリケーションの目的を知らせるようにもしてください。

ジェスチャーが開始されると、ブラウザーはタッチ要素の touch-action の値を、祖先のうちジェスチャーを実装しているもの (言い換えれば、最初のスクロールを含む要素) まで交差させます。つまり実際には、 touch-action は通常、その要素の子孫のいずれかに touch-action を明示的に指定する必要なく、独自の動作を持つ最上位の要素にのみ適用されます。

メモ: ジェスチャーが開始された後、 touch-action の値を変更しても、現在のジェスチャーの動作には影響を与えません。

タッチジェスチャー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
touch-action
36
12
52
13
36
9.3
manipulation
36
12
52
13
36
9.3
none
36
12
52
13
36
13
pan-down
55
79
55
pan-left
55
79
55
pan-right
55
79
55
pan-up
55
79
55
pan-x
36
12
52
13
36
13
pan-y
36
12
52
13
36
13
pinch-zoom
56
12
85
13
56
13
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • ポインタ イベントもタッチ イベントもサポートしない Firefox プラットフォームには適用されません。
注釈 1件
実装メモ
  • ポインタ イベントもタッチ イベントもサポートしない Firefox プラットフォームには適用されません。
注釈 1件
実装メモ
  • ポインタ イベントもタッチ イベントもサポートしない Firefox プラットフォームには適用されません。
注釈 1件
実装メモ
  • ポインタ イベントもタッチ イベントもサポートしない Firefox プラットフォームには適用されません。
注釈 1件
実装メモ
  • ポインタ イベントもタッチ イベントもサポートしない Firefox プラットフォームには適用されません。
注釈 1件
実装メモ
  • ポインタ イベントもタッチ イベントもサポートしない Firefox プラットフォームには適用されません。

基本構文

CSS 
/* Disable default scrolling in the custom swipe UI */
.swipe-area {
  touch-action: none;
}

/* Disable all actions except double-tap zoom */
.button {
  touch-action: manipulation;
}

/* Allow horizontal scrolling only */
.horizontal-scroll {
  touch-action: pan-x;
}

ライブデモ

None(alloperationdisabled)

touch-action None(alloperationdisabled) demo.

プレビュー全画面表示

manipulation

touch-action Manipulation demo.

プレビュー全画面表示

Pan-x(horizontalscroll. only)

touch-action Pan-x(horizontalscroll. only) demo.

プレビュー全画面表示

実務での使いどころ

  • カスタムジェスチャー

    地図やキャンバス上でのピンチ・スワイプ操作をJSで独自に処理するため、ブラウザデフォルトの挙動を無効化する。

  • ゲーム・インタラクティブUI

    タッチ操作を完全に制御するゲームやドラッグ&ドロップUIで使用する。

注意点

  • touch-action: none を広範囲に適用するとスクロールが不能になるため、必要な要素だけに限定する。

アクセシビリティ

  • タッチジェスチャーを無効化する場合、同等の操作をボタンなどの代替手段で提供する。

参考リンク