PixiJSでviewに設定したCanvasをタッチの起点にした際もウィンドウのスクロールを可能にする 👼

www.pixijs.com

PixiJS をつかって、全面Canvasのサイトをつくっているときには気づかなかったのですが、ファーストビューがCanvas（PixiJSでレンダリング）で、その下にコンテンツがつづくページを実装していた際に気付きました。

PixiJSのviewに設定したCanvasをタッチの起点にすると、ページがスクロールできないということに。

挙動的に、touchmoveがpreventDefaultされているような気がしたので、ドキュメントやソースコードを確認してみたところ、autoPreventDefaultをfalseにすれば良さそうだったので、試してみると無事にスクロールするようになりました。

const app = new PIXI.Application({
  view: document.querySelector('canvas'),
});

app.renderer.plugins.interaction.autoPreventDefault = false;
app.renderer.view.style.touchAction = 'auto';

コードで突然登場したtouch-actionですが、調査の段階ではじめに疑った容疑者でした。が。こちらは変更してもスクロールできるようにはなりませんでした。つまり、濡れ衣でした。

気になるプロパティだったので、念のためautoにしています。