L08084のブログ

技術記事の執筆は祈りに似ている

【Ionic(Angular)】Hammer.jsを使っている画面で垂直スクロールができなくなる問題

仕事中に遭遇した障害についてのメモ。iOS13(ベータ版)とAndroid 9で検知した。

発生事象

Ionic(Angular)のGestureを使ってピンチイン・ピンチアウトによるズームを有効にしている画面で、縦方向のスクロールができなくなる障害が発生した。

原因

Ionic(Angular)のGesture機能で呼び出しているライブラリ、Hammer.jsが障害の原因となる。

特定のiOS, Androidのバージョンでスクロールができなくなることを確認した。

対応

Gesturte機能(Hammer.js)を使用しているタグに対して、[style.touch-action]="'pan-y'"を追加することで障害を改修した。

Hammer.jsによって無効になった縦方向のタッチアクションの検出をCSS[style.touch-action]="'pan-y'"で有効にすることによって、スクロールを検知できるようにしている。

  • 対応コードの例

pinchZoomはHammer.jsを使用しているAngularのカスタムディレクティブとなる。

<div [style.touch-action]="'pan-y'" pinchZoom>

バージョン情報

  • Angular: 5.0.1
  • Ionic: 3.9.5

参考サイト

Hammer blocking scroll · Issue #10541 · angular/angular · GitHub

Scrolling disabled on Hammer.js element · Issue #1014 · hammerjs/hammer.js · GitHub