Phaser 3 Touch Scroll on Mobile

While developing Math Command I ran into an issue where mobile users could not scroll the page. It turns out Phaser 3 captures all touch events on the canvas which prevents page scrolling.

The root cause is that Phaser automatically calls “event.preventDefault()” on all touch events. A workaround is to set “game.input.touch.capture” to false and manually call “pointer.event.preventDefault()”. This feels a little hacky but it will enable scrolling while touching the canvas on mobile devices.

var config = {
    type: Phaser.AUTO,
    parent: 'game',
    width: 800,
    height: 600,
    input: {
        touch: {
            capture: true
    scene: {
        create: create

var game = new Phaser.Game(config);

function create () {
  // This prevents Phaser from applying event.preventDefault on all events
  game.input.touch.capture = false;

  var rect = this.add.rectangle(200, 200, 100, 100, 0xff0000);
  rect.on('pointerup', (pointer) => {
    console.log('Pointer Up!');

    // Ensure event.preventDefault is added as it is no longer added automatically

Setting capture to false in the config will also enable scroll in Chrome but will cause weird behavior on mobile devices. This is because the setting completely disables the manager instead of just the “event.preventDefault()” call. See

1 comment

Leave a Reply to Waclaw I Cancel reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.