iPadでスワイプされた時に画面スクロールを抑止する方法

iPadのマップアプリを開発している。タッチ操作によるマップアプリの開発は実に難しい。地図をスワイプしたら地図をスクロールさせ、タップしたらアクション、長押しでまた異なるアクションなど細やかなインタラクションの実装が要求される。

OSSのJSライブラリであるOpenLayersではそれらの制御を実にうまくやってくれるが、今回iPadで問題が発生したので備考録として書いておく。

OpenLayersには標準でズームボタンが実装されているが、iPadの場合ズームボタンをスワイプすると画面全体がスクロールされてしまった。
これは回避不能かと思って諦めていたが地理院地図を見たところ同じ事象は確認されなかったので回避方法を探ってみた（地理院地図はLeafletが使われている）

結論から言うと、スクロールを抑止したいelementに対し、以下のCSSを定義してやればよい

touch-action: none;

これでスクロールやピンチイン・アウトによるズームが防げる。
※iPadと同じiOSであるiPhoneでは完全に抑止は出来なかった。