スマホやタブレットにおいて、パン(指1本で上下左右にスクロールする)やズーム(指2本で拡大や縮小する)の操作を抑制します。pan-* を指定すると指定した方向以外すべてのパンやズームが禁止されます。許可したい時は pan-left pan-up pinch-zomm などのように複数指定してください。

.ta-box {
  width: 150vw;
  margin-bottom: 1rem;
  background-color: #fdd;
  padding: .5rem;
}
.ta-auto { touch-action: auto; }
.ta-none { touch-action: none; }
.ta-pan-x { touch-action: pan-x; }
.ta-pan-left { touch-action: pan-left; }
.ta-pan-right { touch-action: pan-right; }
.ta-pan-y { touch-action: pan-y; }
.ta-pan-up { touch-action: pan-up; }
.ta-pan-down { touch-action: pan-down; }
.ta-pinch-zoom { touch-action: pinch-zomm; }
.ta-manipulation { touch-action: manipulation; }

<div class="ta-box ta-auto">auto</div>
<div class="ta-box ta-none">none</div>
<div class="ta-box ta-pan-x">pan-x</div>
<div class="ta-box ta-pan-left">pan-left</div>
<div class="ta-box ta-pan-right">pan-right</div>
<div class="ta-box ta-pan-y">pan-y</div>
<div class="ta-box ta-pan-up">pan-up</div>
<div class="ta-box ta-pan-down">pan-down</div>
<div class="ta-box ta-pinch-zomm">pinch-zomm</div>
<div class="ta-box ta-manipulation">manipulation</div>

• https://developer.mozilla.org/ja/docs/Web/CSS/touch-action
• https://w3c.github.io/pointerevents/#the-touch-action-css-property
• https://compat.spec.whatwg.org/#touch-action