Disable Scrolling Web Page Ipad

I've seen a lot of solutions involving stopping all touchmove events. However this won't work for me, as my app involves a drawing canvas. Is there a way to ensure that users can't

Solution 1:

You can use e.preventDefault() in your drawing handlers, or in a handler attached further up the DOM tree. This just prevents the default behaviour of the touchmove which is to scroll.

$('body, html').on('touchmove', function(e){
  e.preventDefault();
});

You'll still be able to handle touchmove events on your drawing canvas.

Another option would be to set overflow:hidden in your CSS - but this depends on the size of your page.

Solution 2:

I think you should look to this answer.. Prevent touchmove default on parent but not child

Put your canvas in a container and stop scrolling on the parent.

$('body').delegate('#fix','touchmove',function(e){

    e.preventDefault();

}).delegate('.scroll','touchmove',function(e){

    e.stopPropagation();

});