CSS辞典 touch-actionプロパティ解説

タッチ画面におけるユーザーの操作を指定する「touch-actionプロパティ」の使用方法を記載

CSS3／2.1

対応ブラウザ

初期値	auto
適用される要素	すべての要素。ただし、非置換インライン要素、表の行、行グループ、表の列、列グループを除く
モジュール	Pointer Events Level2、Level 3及びCompatibility Standard
継承	なし

{ touch-action: 操作;}

「touch-actionプロパティ」は、タッチ画面における要素のある領域をユーザーがどのようにジェスチャー操作できるか設定します。

.carousel{
  touch-action: pan-y pinch-zoom;
}

auto	ブラウザーがビューポートのパン（スクロール）やズームなどを含む、許可されたすべてのジェスチャーを利用可能にします。指定する場合は、この値単体で使用します。
none	すべてのジェスチャーを無効にします。指定する場合は、この値単体で使用します。
pan-x	水平方向にパンするジェスチャーを有効にします。pan-y、pan-up、pan-downのいずれか１つ、及びpinch-zoomと半角スペースで区切って同時に指定できます。
pen-y	垂直方向にパンするジェスチャーを有効にします。pan-y、pan-up、pan-downのいずれか１つ、及びpinch-zoomと半角スペースで区切って同時に指定できます。
manipulation	パン及びズームのジェスチャーのみを有効にし、その他のジェスチャーは無効にします。指定する場合は、この隊を単体で使用します。
pan-left	左にパンするジェスチャーを有効にします。
pan-right	右にパンするジェスチャーを有効にします。
pan-up	上にパンするジェスチャーを有効にします。
pan-down	下にパンするジェスチャーを有効にします。
pinch-zoom	複数の指でのパンやズームを有効にします。