HammerJS swipe not working on elements with overflow css property

EDIT: The snippet works fine when embedded in the question, but not when edited; which made me realize it had to do with underlying containers that can scroll... I tested this on my phone and hammer works fine on the small areas that don't have the overflow property.
I updated the snippet to reflect this.

The question is: how to get it to work on containers that need to scroll vertically?


I am building in swipe navigation in an Angular PWA. I had it working on Chrome desktop but it did not work on my phone. When I tried the touch emulator in Chrome devtools it went all crazy depending on the orientation / device, mostly not detecting anything at all. panleft and panright work marginally better but for some reason break hammer completely (possibly because I did not debounce it, it just stops detecting without any errors after a short while).

What am I doing wrong?

The snippet below behaves similar when used with device emulators in Chrome devtools

const hammer = new Hammer(document.documentElement);
hammer.on('swipeleft swiperight', event => {
  console.log(event.type);
});
body,
html {
  height: 100%;
}

.content {
  margin-top: 20%;
  width: 100%;
  height: 80%;
  background: orange;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
Can touch this
<div class="content">Can't touch this (on mobile / emulator)</div>

Actual code

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private gameService: GameService,
    private routerService: RouterService
  ) {}

  ngOnInit() {
    this.gameService.gameInit();

    const hammer = new Hammer(document.documentElement);
    hammer.on('swipeleft swiperight', event => {
      if (event.type === 'swiperight') {
        this.routerService.navNext();
      } else if (event.type === 'swipeleft') {
        this.routerService.navPrev();
      }
    });
  }
}