タップ操作のオプション

touch-action CSS プロパティを使用すると、デベロッパーはユーザーが要素を操作する方法を制限できます。これは、必要のないときにイベントがディスパッチされないようにするのに特に役立ちます。

バージョン 55 より前、Chrome は要素を 1 方向のスクロールに制限する pan-x と pan-y をサポートしていました。

次の動画は、タップ操作が定義されていない要素（左）と、pan-x と pan-y（中央と右）の例を示しています。

中央と右側のスクリーンキャストの CSS は次のとおりです。

.pan-x {
    touch-action: pan-x;
}

.pan-y {
    touch-action: pan-y;
}

Chrome 55 では、pan-left、pan-right、pan-up、pan-down が追加されました。これらのプロパティには、動作に微妙ながら重要な違いがあります。

これらのプロパティを使用すると、要素が応答する前に、ユーザーが 1 つの方向にジェスチャーを開始する必要があります。これは、ユーザーが画面を下にスワイプしたときにのみ応答する「プルして更新」ジェスチャーに似ています。

次の動画は、それぞれ右から左と下から上に開始するジェスチャーを必要とする pan-right と pan-down を示しています。ジェスチャーを開始すると、実際に左右にパンできます。影響を受けるのは最初の方向のみです。

この動作は動画で説明されていますが、サンプルをチェックアウトしてご自身で試してみることをおすすめします。

このデモの CSS は次のとおりです。

.pan-right {
    touch-action: pan-right;
}

.pan-down {
    touch-action: pan-down;
}

タップ操作の世界で最後に登場したのが pinch-zoom プロパティです。これは Chrome 55 の新しいプロパティで、フラグで保護されています。任意のパン オプション（pan-x、pan-y、pan-left、pan-right、pan-down、pan-up）で使用できます。

ウェブサイトをピンチすると、通常はページのコンテンツがズームインします。touch-action を定義するとこの動作は防止されますが、ピンチ操作でズームするとこの動作が再び有効になります。

この動画は、touch-action: pan-x と touch-action: pan-x pinch-zoom の違いを示しています。

これらのプロパティはすべて、pointer-events を使用してデベロッパーが実装する必要のあるロジックの一部を簡素化します。