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  amp  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

User · Answer

document addEventListener  touchstart   function e   e preventDefault     false   document addEventListener  touchmove   function e   e preventDefault     false     This should prevent scrolling  but it will also break other touch events unless you define a custom way to handle them

User · Answer

To my surprise  the  quot preventDefault   quot  method is working for me on latest Google Chrome  version 85  on iOS 13 7  It also works on Safari on the same device and also working on my Android 8 0 tablet  I am currently implemented it for 2D view on my site here  https   papercraft-maker com

User · Answer

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

User · Answer

I found that ev stopPropagation    worked for me

User · Answer

The ultimate solution would be setting overflow  hidden  on document documentElement like so      element is an HTML element You want catch the touch    element addEventListener  touchstart   function e        document documentElement style overflow    hidden        document addEventListener  touchend   function e        document documentElement style overflow    auto         By setting overflow  hidden on start of touch it makes everything exceeding window hidden thus removing availability to scroll anything  no content to scroll    After touchend the lock can be freed by setting overflow to auto  the default value    It is better to append this to  lt html gt  because  lt body gt  may be used to do some styling  plus it can make children behave unexpectedly   EDIT  About touch-action  none  - Safari doesn t support it according to MDN

User · Answer

There is a little  hack  on CSS that also allows you to disable scrolling    lock-screen       height  100       overflow  hidden      width  100       position  fixed      Adding that class to the body will prevent scrolling

User · Answer

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

User · Answer

try overflow hidden on the thing you don t want to scroll while touch event is happening   e g set overflow hidden on Start and set it back to auto on end   Did you try it    I d be interested to know if this would work   document addEventListener  ontouchstart   function e        document body style overflow    hidden      false    document addEventListener  ontouchmove   function e        document body style overflow    auto      false

[javascript] Disable scrolling when touch moving certain element

Examples related to javascript

Examples related to jquery-mobile

Examples related to touch