みかづきブログ・カスタム

基本的にはちょちょいのほいです。

touch-action: noneでtouch操作を無効にする 👆

f:id:kimizuka:20210207131317p:plain

iOSでウェブページのスクロールを止めるためにもろもろ調査をしていて、touch-actionたるものを知りました。

developer.mozilla.org

その名の通り、許容するタッチ操作を指定できるプロパティで、

touch-action: none

とすることで、スワイプ、ピンチなどのすべてのタッチ操作を無効にできます。

pointer-events: none

に似ているのですが、touch-actionで指定できるのはあくまでタッチ操作なので、

a {
  pointer-events: none;
}

だと、リンクが無効になります(clickやmouseoverも無効になるため)が、

a {
  touch-action: none;
}

だとリンクは無効になりません。

iOS13から使えるようです。