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

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

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

f:id:kimizuka:20200708004448p:plain

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にしています。