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;
}

デモ

touch-action の実装デモ

1: この要素にはtouch-action: none は適用されていません。この要素上でパンすると普通にスクロールします。

2: この要素は touch-action: none が適用されています。この要素上でパンしてもスクロールしません。

touch-action: none が適用されている要素上ではブラウザ由来のタッチ操作を全て無効にできます。

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

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。