Widely available 全主要ブラウザで対応済み。安心して使用できる。
インタラクション Widely available

touch-action

ブラウザが処理するタッチジェスチャー（スクロール、ピンチズームなど）を制御できる。touch-action: none でタッチ操作を完全にJS側で処理したり、manipulation でダブルタップズームだけを無効化したりできる。カスタムジェスチャーを実装する際に不可欠なプロパティ。

タッチジェスチャー

概要

ブラウザが処理するタッチジェスチャー（スクロール、ピンチズームなど）を制御できる。touch-action: none でタッチ操作を完全にJS側で処理したり、manipulation でダブルタップズームだけを無効化したりできる。カスタムジェスチャーを実装する際に不可欠なプロパティ。

対応ブラウザ

デスクトップ

Chrome 36+
Edge 12+
Safari 13+
Firefox 52+

モバイル

Chrome Android 36+
Safari iOS 9.3+
Firefox Android 52+

基本構文

CSS 
/* カスタムスワイプUIでデフォルトスクロールを無効化 */
.swipe-area {
  touch-action: none;
}

/* ダブルタップズームのみ無効化 */
.button {
  touch-action: manipulation;
}

/* 横スクロールのみ許可 */
.horizontal-scroll {
  touch-action: pan-x;
}

実務での使いどころ

  • カスタムジェスチャー

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

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

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

注意点

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

アクセシビリティ

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

参考リンク