touch-action
touch-action
は CSS のプロパティで、タッチ画面のユーザーが要素のある領域をどのように操作できるか(例えば、ブラウザー内に組み込まれたパンまたはズーム機能)を設定します。
/* キーワード値 */
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: revert;
touch-action: unset;
既定では、パン(スクロール)およびピンチ操作はブラウザーとは独立して別に扱われます。ポインターイベントを使用するアプリケーションは、ブラウザーがタッチジェスチャーの扱いを始めるときに pointercancel
イベントを受け取ります。ブラウザーがどのジェスチャーを扱うかについての具体的に定義することによって、アプリケーションはジェスチャーを記憶するために pointermove
および pointerup
リスナーの中で独自の振る舞いを提供することができます。タッチイベントを使用するアプリケーションは、 preventDefault()
を呼び出すことでブラウザーがジェスチャーを扱うのを無効にすることができますが、イベントリスナーが呼び出される前に、 touch-action
を使用してブラウザーにアプリケーションの目的を知らせるようにもしてください。
ジェスチャーが開始されると、ブラウザーはタッチ要素の touch-action
の値を、祖先のうちジェスチャーを実装しているもの (言い換えれば、最初のスクロールを含む要素) まで交差させます。つまり実際には、 touch-action
は通常、その要素の子孫のいずれかに touch-action
を明示的に指定する必要なく、独自の動作を持つ最上位の要素にのみ適用されます。
メモ:
ジェスチャーが開始された後、 touch-action
の値を変更しても、現在のジェスチャーの動作には影響を与えません。
構文
touch-action
プロパティは次の何れかの形で指定することができます。
- キーワード
auto
,none
,manipulation
のうち一つ、または - キーワード
pan-x
,pan-left
,pan-right
のうち一つと、キーワードpan-y
,pan-up
,pan-down
のうち一つと、加えて任意のキーワードpinch-zoom
。
値
auto
-
ブラウザーがすべてのパンやズームのジェスチャーを扱うことを有効にします。
none
-
ブラウザーがすべてのパンやズームのジェスチャーを扱うことを無効にします。
pan-x
-
指 1 本で水平にパンするジェスチャーを有効にします。 pan-y, pan-up, pan-down, pinch-zoom と組み合わせることができます。
pan-y
-
指 1 本で垂直にパンするジェスチャーを有効にします。 pan-x, pan-left, pan-right, pinch-zoom と組み合わせることができます。
manipulation
-
パンおよびズームのジェスチャーは有効にしますが、ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーがクリックイベントの生成を待つ必要がなくなります。これは "pan-x pan-y pinch-zoom" の別名です (互換性のために、これも有効です)。
pan-left
,pan-right
,pan-up
,pan-down
Experimental-
指定された方向へのスクロールを始める指 1 本のジェスチャーを有効にします。スクロールが始まると、その方向が予約されることがあります。なお、「上」にスクロールすること (pan-up) は、ユーザーが画面の表面を指で下方向にドラッグすることを意味し、同様に pan-left はユーザーが指で右にドラッグすることを意味します。より単純な表現がない限り、複数の方向を組み合わせることができます (例えば、 "pan-left pan-right" は "pan-x" の方がより単純なので不正ですが、 "pan-left pan-down" 有効です)。
pinch-zoom
-
複数の指でのページのパンやズーム有効にします。これは pan- のあらゆる値と組み合わせることができます。
アクセシビリティの考慮
touch-action: none;
の宣言は、ブラウザー内蔵のズーム機能を操作することを阻害することがあります。これは弱視の人がページのコンテンツを読んで理解できるようになることを阻害します。
公式定義
初期値 | auto |
---|---|
適用対象 | 非置換インライン要素、表の行、行グループ、表の列、列グループを除くすべての要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | アニメーション不可 |
形式文法
例
すべてのジェスチャーの無効化
最も一般的な使い方は、要素(およびスクロールしないその子孫)のすべてのジェスチャーを無効にして、地図やゲームの画面のように、独自のドラッグやズームの振る舞いを提供することです。
HTML
<div id="map"></div>
CSS
#map {
height: 150vh;
width: 70vw;
background: linear-gradient(blue, green);
touch-action: none;
}
結果
仕様書
Specification |
---|
Compatibility Standard # touch-action |
Pointer Events # the-touch-action-css-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
pointer-events
- ポインターイベント
- WebKit Blog More Responsive Tapping on iOS
- Google Developers Blog Making touch scrolling fast by default
- スクロールスナップ