css のプロパティ touch-action だけでブラウザのスクロール操作を無効化できる

独自のタッチ操作を javascript で実装するときに、ブラウザに実装されているタッチ操作「パン (スクロール)」「ズーム」がときに邪魔になります。

このようなときは、ブラウザに実装されているタッチ操作を簡単に無効にすれば良いです。

touch-action: none

touch-action: none を当てた要素上では、ブラウザ由来のタッチ操作を全て無効にできます。

対応状況

Can I Use… によると、Chrome も Safari (iOS 13 以降) も対応しています。

実装方法

HTML

<div class="mainview">
  <h2>touch-action の実装</h2>
  <p>この要素上でパンすると普通にスクロールします</p>
  <p class="touch_action_none">この要素上でパンしてもスクロールしません。</p>
  <p>"touch-action:none" のスタイルを当てた要素上ではブラウザ由来のタッチ操作を全て無効にできます。</p>
</div>

CSS

.mainview{...}

p.touch_action_none{
  padding: 30px 0;
  touch-action: none;
}

デモ

タッチデバイスでデモを触ってみると、 2 の要素上ではスクロールもズーム操作もできないことがわかります。