JavaScript で Mac のマルチタッチジェスチャによる拡大縮小を無効にする

意外と求めている情報にたどり着きづらかったのでメモしておきます。

Mac ではトラックパッドや Magic Mouse などのタッチパッド上で２本の指を近づけたり離したりすることで、ウェブページの画面の表示部分を拡大縮小することができます（＝ピンチイン・アウト ジェスチャ）。^[1]

これは便利な機能ですが、Figma のようなマルチタッチジェスチャを多用するような Web アプリケーションを作成しようとした場合、ツールバーなどの UI が拡大されてしまっては困ります。

これを無効にするためには 'wheel' イベントにリスナーを設定し、 preventDefault() で止めるようにします。

const element = document.querySelector('.target');
element?.addEventListener(
  "wheel",
  (e) => {
    e.preventDefault();
  },
  { passive: false }
);

以下に、拡大・縮小が無効に設定されているのを確認できるサンプルページを置いておきます。

https://codesandbox.io/s/mac-pinch-gesture-example-3v5ulx

赤いboxの上では何も処理をしていないので、ピンチジェスチャで拡大・縮小されますが、
青いboxの上ではイベントを止めているので、拡大・縮小ができないようになっています。

脚注

1. https://support.apple.com/ja-jp/HT204895