CODEWITHSUNDEEP
javascriptbrowserscrollpointer-events
szimek
szimek

Reputation: 6484

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

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?

Upvotes: 6

Views: 8369

Answers (1)

Marius
Marius

Reputation: 961

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.

Upvotes: 9

Related Questions