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

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

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値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のいずれか1つ、及びpinch-zoomと半角スペースで区切って同時に指定できます。
pen-y垂直方向にパンするジェスチャーを有効にします。pan-y、pan-up、pan-downのいずれか1つ、及びpinch-zoomと半角スペースで区切って同時に指定できます。
manipulationパン及びズームのジェスチャーのみを有効にし、その他のジェスチャーは無効にします。指定する場合は、この隊を単体で使用します。
pan-left左にパンするジェスチャーを有効にします。
pan-right右にパンするジェスチャーを有効にします。
pan-up上にパンするジェスチャーを有効にします。
pan-down下にパンするジェスチャーを有効にします。
pinch-zoom複数の指でのパンやズームを有効にします。