CSS の touch-action プロパティは、指定された領域がタッチスクリーンで操作できるかどうか (例えば、ブラウザー内に組み込まれたパン又はズーム機能)、及びその方法を指定します。
/* キーワード値 */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* グローバル値 */ touch-action: inherit; touch-action: initial; touch-action: unset;
| 初期値 | auto |
|---|---|
| 適用対象 | 非置換インライン要素、表の行、行グループ、表の列、列グループを除くすべての要素 |
| 継承 | なし |
| メディア | 視覚 |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
既定で、パン (スクロール) 及びピンチ操作はブラウザーとは独立して別に扱われます。 Pointer_events を使用するアプリケーションは、ブラウザーがタッチジェスチャーの扱いを始めるときに pointercancel イベントを受け取ります。ブラウザーがどのジェスチャーを扱うかについての具体的に定義することによって、アプリケーションはジェスチャーを記憶するために pointermove 及び pointerup リスナーの中で独自の振る舞いを提供することができます。 Touch_events を使用するアプリケーションは、 preventDefault() を呼び出すことでブラウザーのジェスチャーの扱いを無効にすることができますが、イベントリスナーが呼び出される前に、 touch-action を使用してブラウザーにアプリケーションの目的を知らせるようにもしてください。
ジェスチャーが開始されると、ブラウザーはタッチ要素の touch-action の値を、祖先のうちジェスチャーを実装しているもの (言い換えれば、最初のスクロールを含む要素) まで交差させます。つまり実際には、 touch-action は通常、その要素の子孫のいずれかに touch-action を明示的に指定する必要なく、独自の動作を持つ個々の要素にのみ適用されます。ジェスチャーが開始された後、 touch-action 値を変更しても、現在のジェスチャーの動作には影響を与えません。
構文
touch-action プロパティは次の何れかの形で指定することができます。
auto,none,manipulationのキーワードのうち一つと、またはpan-x,pan-left,pan-right, and/or one of the keywordspan-y,pan-up,pan-down, のキーワードのうち一つと、加えて任意のキーワードpinch-zoom。
値
auto- ブラウザーがすべてのパンやズームのジェスチャーを扱うことを有効にします。
none- ブラウザーがすべてのパンやズームのジェスチャーを扱うことを無効にします。
pan-x- 指１本で水平にパンするジェスチャーを有効にします。 pan-y, pan-up, pan-down, pinch-zoom と組み合わせることができます。
pan-y- 指１本で垂直にパンするジェスチャーを有効にします。 pan-x, pan-left, pan-right, pinch-zoom と組み合わせることができます。
manipulation- パン及びズームのジェスチャーは有効にしますが、ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーがクリックイベントの生成を待つ必要がなくなります。これは "pan-x pan-y pinch-zoom" の別名です (互換性のために、これも有効です)。
pan-left,pan-right,pan-up,pan-down- 指定された方向へのスクロールを始める指１本のジェスチャーを有効にします。スクロールが始まると、その方向が予約されることがあります。なお、「上」にスクロールすること (pan-up) は、ユーザーが画面の表面を指で下方向にドラッグすることを意味し、同様に pan-left はユーザーが指で右にドラッグすることを意味します。より単純な表現がない限り、複数の方向を組み合わせることができます (例えば、 "pan-left pan-right" は "pan-x" の方がより単純なので不正ですが、 "pan-left pan-down" 有効です)。
pinch-zoom- 複数の指でのページのパンやズーム有効にします。これは pan- のあらゆる値と組み合わせることができます。
形式文法
auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
例
最も一般的な使い方は、要素 (及びスクロールしないその子孫) のすべてのジェスチャーを無効にして、地図やゲームの画面のように、独自のドラッグやズームの振る舞いを提供することです。
#map {
touch-action: none;
}
もう一つのよくあるパターンは、水平方向のパンを扱うためにポインターイベントを使用する画像ギャラリーですが、文書自体の垂直スクロールやズームを阻害したくない場合です。
.image-carousel {
width: 100%;
height: 150px;
touch-action: pan-y pinch-zoom;
}
touch-action は、ダブルタップによるズームジェスチャーに対応することによって起きたクリックイベントの遅延を完全に止めるためにもよく使用されます。
html {
touch-action: manipulation;
}
アクセシビリティの考慮事項
touch action: none; の宣言は、ブラウザー内蔵のズーム機能を操作することを阻害することがあります。これは弱視の人がページのコンテンツを読んで理解できるようになることを阻害します。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Compatibility Standard touch-action の定義 |
現行の標準 | pinch-zoom プロパティ値を追加。 |
| Pointer Events – Level 2 touch-action の定義 |
草案 | pan-left, pan-right, pan-up, pan-down プロパティ値を追加。 |
| Pointer Events touch-action の定義 |
勧告 | 初回定義。 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome 完全対応 36 | Edge 完全対応 12 | Firefox
完全対応
52
| IE
完全対応
11
| Opera 完全対応 23 | Safari
未対応
なし
| WebView Android 完全対応 37 | Chrome Android 完全対応 36 | Edge Mobile 完全対応 あり | Firefox Android
完全対応
52
| Opera Android 完全対応 あり | Safari iOS
未対応
なし
| Samsung Internet Android 完全対応 あり |
manipulation | Chrome 完全対応 36 | Edge 完全対応 12 | Firefox
完全対応
52
| IE
完全対応
11
| Opera 完全対応 23 | Safari 未対応 なし | WebView Android 完全対応 37 | Chrome Android 完全対応 36 | Edge Mobile 完全対応 あり | Firefox Android
完全対応
52
| Opera Android 完全対応 あり | Safari iOS 完全対応 9.1 | Samsung Internet Android 完全対応 あり |
double-tap-zoom | Chrome 未対応 なし | Edge 完全対応 12 | Firefox 未対応 なし | IE
完全対応
11
| Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 完全対応 あり | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
pinch-zoom | Chrome 完全対応 56 | Edge 完全対応 12 | Firefox
未対応
なし
| IE
完全対応
11
| Opera 完全対応 43 | Safari 未対応 なし | WebView Android 完全対応 56 | Chrome Android 完全対応 56 | Edge Mobile 完全対応 あり | Firefox Android
未対応
なし
| Opera Android 完全対応 43 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 6.0 |
pan-up, pan-down, pan-left and pan-right | Chrome 完全対応 55 | Edge 未対応 なし | Firefox
未対応
なし
| IE 未対応 なし | Opera 完全対応 42 | Safari 未対応 なし | WebView Android 完全対応 55 | Chrome Android 完全対応 55 | Edge Mobile 未対応 なし | Firefox Android
未対応
なし
| Opera Android 完全対応 42 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 6.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
Pointer Events- WebKit Blog More Responsive Tapping on iOS
- Google Developers Blog Making touch scrolling fast by default
- スクロールスナップ