ブラウザのスクロール操作を無効化するCSS(touch-action)

2021-12-11

この記事は、ryokatsu Advent Calendar 2021の11日目の記事です。

初めて知ったので記事にします。

ある領域においてユーザーがタッチ操作をどのようにさせるかを設定できるCSSです。パンするかスクロールするかなどを設定できます。何かのJSライブラリで独自にタッチ操作をしている場合に上手くUIが作れない場合とかに役立ちます。特にiOS Safariとかで発生しそう

その昔、こんなおまじないをmetaタグに設定したのを思い出しました。


<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

これはiOS10以降ではuser-scalable=noの指定が無効になったっぽいです。

違う例で、JavaScriptだとpassive: trueのような設定ができたりして以下はスクロールの方向を水平だけにしたいときに使います


document.body.addEventListener('pointermove', event => {
  if (event.cancelable) {
      event.preventDefault(); 
  }
}, {passive: true});

このあたりのスクロール系は制御が面倒だったりしますが以下だけで制御できます。

touch-action: pan-x

noneに指定した領域ではスクロールを無効化することができるCSSです。

<div>
  <div class="scroll"></div>
  <div class="no-scroll"></div>
</div>


.no-scroll {
  touch-action: none
}

少し古いですが以下のような記事がありました。

動作確認はしていないですが記事内で触れられているmanipulationを使う方が良さそうな気がしています。

タッチ操作は奥が深い。。