javascript - Disable scrolling when touch moving certain element -

i have page section sketch drawing in. touchmove events, @ least vertical ones, scrolling page (which degrades sketching experience) when using on mobile browser. there way either a) disable & re-enable scrolling of page (so can turn off when each line started, turn on after each done), or b) disable default handling of touchmove events (and presumably scrolling) go canvas sketch drawn in (i can't disable them completely, sketching uses them)?

i've used jquery-mobile vmouse handlers sketch, if makes difference.

update: on iphone, if select canvas sketched in, or hold finger bit before drawing, page doesn't scroll, , not because of coded in page.

similar answer given @llepwryd, used combination of ontouchstart , ontouchmove prevent scrolling when on element.

taken as-is project of mine:

window.blockmenuheaderscroll = false; $(window).on('touchstart', function(e) {     if ($(e.target).closest('#mobilemenuheader').length == 1)     {         blockmenuheaderscroll = true;     } }); $(window).on('touchend', function() {     blockmenuheaderscroll = false; }); $(window).on('touchmove', function(e) {     if (blockmenuheaderscroll)     {         e.preventdefault();     } }); 

essentially, doing listening on touch start see whether begins on element child of using jquery .closest , allowing turn on/off touch movement doing scrolling. e.target refers element touch start begins with.

you want prevent default on touch move event need clear flag @ end of touch event otherwise no touch scroll events work.

this can accomplished without jquery usage, had jquery , didn't need code find whether element has particular parent.

tested in chrome on android , ipod touch of 2013-06-18