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

Following solution preventing scroll when dragging AND at the same time usual scroll is working (when not dragging)

var scrollable = true;

var listener = function(e) {
    if (! scrollable) {
        e.preventDefault();
    }
}

document.addEventListener('touchmove', listener, { passive:false });


onDragstartHandler() {
  scrollable = false;
}

onDragendHandler(} {
  scrollable = true;
}

Don't forget to bind onDragstartHandler and onDragendHandler to related elements