Prevent Web Page Touch/ Scrolling on Safari in iOS 11 Devices

Question

I used to use the following code to prevent web page from scrolling on touch devices (specifically tested on iOS).

disableScroll = false;
$(document).on('touchmove',function(e) {
    if (disableScroll) {
        e.preventDefault();
    }
});

However since iOS 11 this no longer works. Using iOS Simulator I can go back and test on iOS 9 and iOS 10 and it works fine but no longer on iOS11. Can anyone suggest an alternative solution?

For example, testing this similar functionality on iOS 9/10 works but doesn't on iOS 11. https://benfrain.com/preventing-body-scroll-for-modals-in-ios/

Alternative might be CSS, adding `overflow: hidden` to the body or the tag that you want to stop the scrolling. I usually have a general class called `.no-scoll` that I apply with JS instead of preventing the default event` — Adrian Florescu, May 24 '18 at 07:47

score 1 · Answer 1 · answered Oct 03 '18 at 20:40

1

Similar question but with plain javascript is answered at https://stackoverflow.com/a/49582193

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false });

answered Oct 03 '18 at 20:40

Bati

41
6

you need to bind preventDefault to two events: touchmove && touchforcechange. https://bugs.webkit.org/show_bug.cgi?id=163207 – User007 Aug 18 '19 at 06:37

Prevent Web Page Touch/ Scrolling on Safari in iOS 11 Devices

1 Answers1