CSSのtouch-actionでタッチ操作のパンやズームを制御する方法をわかりやすく解説

2024.09.14
スポンサーリンク

touch-actionプロパティは、タッチ操作における動作を制御するために使用されます。このプロパティを使用することで、パン、ズーム、タッチジェスチャーなどの挙動を指定できます。

スポンサーリンク

touch-actionプロパティの値とその効果の一覧

  • auto – ユーザーエージェントのデフォルトのタッチ操作が許可されます。
  • none – すべてのタッチ操作が無効になります。
  • pan-x – 水平方向のスクロールが許可されます。
  • pan-y – 垂直方向のスクロールが許可されます。
  • manipulation – ズームやタッチジェスチャー以外のタッチ操作が許可されます。

注意点や関連情報

touch-actionプロパティを使用する場合、要素に対してoverflowが設定されている場合にスクロールの挙動を制御することが多く、特にタッチデバイスでの操作に影響を与えます。

注：スマホやタブレットなどのタッチパネル操作のみの制御です。マウスでは動きます。

touch-actionが効かない時の原因と対策

タッチデバイスでテストしていない

touch-actionは、タッチデバイス（スマートフォンやタブレットなど）でのユーザーのジェスチャーに対する動作を制御するプロパティです。デスクトップやマウス操作では効果が見えにくいため、タッチデバイスでテストする必要があります。

対策: touch-actionを使用する際は、必ずタッチデバイスでテストしてください。例えば、スマートフォンやタブレットで、パン（スクロール）やズームの動作が正しく無効化されているか確認します。

タッチイベントが他のイベントリスナーで阻害されている

JavaScriptのイベントリスナーや他のライブラリがタッチイベントをハンドリングしている場合、touch-actionが正常に機能しないことがあります。

対策: JavaScriptのイベントリスナーやライブラリでタッチイベントをどのように処理しているか確認し、競合するイベントがないか確認します。preventDefault()などを使用することで、特定のタッチイベントを抑制しつつ、touch-actionを適用する方法も検討します。

pointer-eventsとの競合

pointer-eventsプロパティがnoneに設定されている場合、要素がタッチイベントを受け取らず、touch-actionも無効になることがあります。これにより、タッチ操作が期待通りに機能しません。

対策: pointer-eventsプロパティが影響していないか確認します。必要に応じて、pointer-events: auto;のように設定して、タッチイベントが有効になっていることを確認します。

共通するCSSコード

.css-sample-container {
      width: 300px;
      height: 200px;
      margin: 20px auto;
      border: 2px solid #333;
      background-color: #f0f0f0;
      overflow: auto;
    }

    .css-sample-box {
      width: 400px;
      height: 400px;
      background-color: #ff6347;
    }

touch-action: auto;

デフォルトのタッチ操作が許可される設定です。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-touch-auto"></div>
    </div>

CSSコード

.css-sample-touch-auto {
      touch-action: auto;
    }

表示結果

touch-action: pan-x;

水平方向のスクロールが許可されますが、垂直方向の操作は無効になります。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-touch-pan-x"></div>
    </div>

CSSコード

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

表示結果

touch-action: pan-y;

垂直方向のスクロールが許可されますが、水平方向の操作は無効になります。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-touch-pan-y"></div>
    </div>

CSSコード

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

表示結果

touch-action: manipulation;

ズームやタッチジェスチャー以外の操作が許可されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-box css-sample-touch-manipulation"></div>
    </div>

CSSコード

.css-sample-touch-manipulation {
      touch-action: manipulation;
    }

表示結果

まとめ

  • touch-actionプロパティは、要素のタッチ操作を制御します。
  • autoはデフォルトのタッチ操作が許可され、noneではすべてのタッチ操作が無効になります。
  • スクロールやズームを細かく制御できるため、モバイル向けのWebデザインで便利です。
スポンサーリンク