Disable scrolling when touch moving certain element

javascript jquery-mobile touch
Scott Hunter picture Scott Hunter · May 2, 2013 · Viewed 115.6k times · Source

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

John Weisz picture John Weisz · Apr 7, 2017

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.

Related questions

Eliminate 300ms delay on click events in mobile Safari

I've read that mobile Safari has a 300ms delay on click events from the time the link/button is clicked to the time the event fires. The reason for the delay is to wait to see if the user intends …

Read More
How can I check if a checkbox is checked?

I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my code. <script type=text/javascript> function validate(){ if (remember.checked == 1){ alert("checked") ; } else { alert("You …

Read More
How to redirect on another page and pass parameter in url from table?

How to redirect on another page and pass parameter in url from table ? I've created in tornato template something like this <table data-role="table" id="my-table" data-mode="reflow"> <thead> <tr> <th>Username&…

Read More