Disable scrolling when touch moving certain element

Question

I have a page with a section to sketch a drawing in. But the touchmove events, at least the vertical ones, are also scrolling the page (which degrades the sketching experience) when using it on a mobile browser. Is there a way to either a) disable & re-enable the scrolling of the page (so I can turn it off when each line is started, but turn it back on after each is done), or b) disable the default handling of touchmove events (and presumably the scrolling) that go to the canvas the sketch is drawn in (I can't just disable them completely, as the sketching uses them)?

I've used jquery-mobile vmouse handlers for the sketch, if that makes a difference.

Update: On an iPhone, if I select the canvas to be sketched in, or just hold my finger for a bit before drawing, the page doesn't scroll, and not because of anything I coded in the page.

Answer 1

Set the touch-action CSS property to none, which works even with passive event listeners:

touch-action: none; 

Applying this property to an element will not trigger the default (scroll) behavior when the event is originating from that element.

Answer 2

Note: As pointed out in the comments by @nevf, this solution may no longer work (at least in Chrome) due to performance changes. The recommendation is to use touch-action which is also suggested by @JohnWeisz's answer.

Similar to the answer given by @Llepwryd, I used a combination of ontouchstart and ontouchmove to prevent scrolling when it is on a certain element.

Taken as-is from a 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, what I am doing is listening on the touch start to see whether it begins on an element that is a child of another using jQuery .closest and allowing that to turn on/off the touch movement doing scrolling. The e.target refers to the element that the touch start begins with.

You want to prevent the default on the touch move event however you also need to clear your flag for this at the end of the touch event otherwise no touch scroll events will work.

This can be accomplished without jQuery however for my usage, I already had jQuery and didn't need to code something up to find whether the element has a particular parent.

Tested in Chrome on Android and an iPod Touch as of 2013-06-18