Prevent page scroll on drag in IOS and Android

Question

I\'m working on a html5 canvas game, but I don\'t know how to handle touch events. When a user touch the screen, and drag, then the browser will scroll the page. I would lik

Answer 1

Due to breaking changes made in recent versions of Chrome, the above answers are no longer correct. Attaching a touch event listener to the document or body elements will cause the event listener to be registered in "passive" mode, which causes calls to preventDefault to be ignored.

There are two solutions:

• The preferred solution is to use the CSS style touch-action to specify that no scrolling should happen (e.g. with the value "none")

• In cases where this is not appropriate (e.g. if the type of interaction should change dynamically in a way that cannot be determined before the gesture begins) then the event listener must be registered with the third parameter set to { passive: false } (you should perform browser detection to ensure that this style is supported first, though).