How to disable scroll of the whole page using pointer events on an element?

Question

I've got an library that allows drawing on a canvas. Currently, it supports mouse and touch events. I'd like to add support for pointer events as well.

I'm handling pointerdown, pointermove and pointerup events on the canvas element. Everything works fine in Chrome on my laptop when I use mouse. However, when I try it out on my tablet, I'm only getting a few pointermove events (2-5) before getting pointercancel event followed by pointerout and pointerleave.

I guess the browser is triggering pointercancel, because moving my finger over the canvas triggers scrolling of the whole page as well.

To disable scrolling when using touch events, I'm calling event.preventDefault() in handlers for touchstart and touchmove events, but this solution doesn't seem to be working with pointer events.

How to disable scrolling of the whole page when I draw over the canvas element when using pointer events?

Longhand

Have you tried .stopPropagation() ? – Gandhi

Answer 1

Have you tried the CSS property touch-action: none? It disables any kind of user-agent behavior (like scrolling) on an element.

For more fine grained options checkout the MDN article for touch-action.

Sabrasabre

Thanks! I'm setting it when browser is using touch events, but completely forgot about it and I didn't set it up for pointer events. – Longhand

What if I want to disable scrolling conditionally, e.g. when a specific place is tapped? – Ebullient

@Ebullient for that you'd need to add a non-passive touchstart/touchmove event listener and call preventDefault. – Yocum