独自のタッチ操作を 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;
}
デモ
touch-action の実装デモ
1: この要素にはtouch-action: none は適用されていません。この要素上でパンすると普通にスクロールします。
2: この要素は touch-action: none が適用されています。この要素上でパンしてもスクロールしません。
touch-action: none が適用されている要素上ではブラウザ由来のタッチ操作を全て無効にできます。
タッチデバイスでデモを触ってみると、 2 の要素上ではスクロールもズーム操作もできないことがわかります。