Not entirely preventing body scroll on iOS 12.x

[dlong500]

Even with the provided demo, one can still scroll the body in iOS 12 if you touch at the bottom of the page when the browser controls are hidden.

To be absolutely clear, when you first load the demo (as with any page on iOS) the browser address bar at the top and the controls down at the bottom are visible. If you proceed to press the "Disable Body Scroll" button with the browser controls still visible then everything appears to work correctly (you can scroll within the target element but not the body).

However, if you first scroll the body enough so that Mobile Safari hides the controls at the bottom of the page and then press the "Disable Body Scroll" button you can scroll the body if you start touching at the bottom of the page. It would seem that some different touch behavior occurs where the hidden browser controls would normally be shown. This is a serious bug. Not sure if the bug is in your library or in Webkit/iOS, but I'd be interested to hear feedback from others.

Again, this faulty behavior shows up even with the provided demo at https://bodyscrolllock.now.sh.

[drwsmth]

I’m having exactly the same issue.

[lamathop]

Same here :+1:

[JiveDig]

Seeing this as well.

[KennisTsui]

Same here ~"~

[willmcpo]

Hi all

Thanks for raising this issue.

It has been noted but I've not had time to investigate. If anyone can try to debug and share the findings, that would be great.

[KiwiKilian]

After some research I figured the touchmove event isn't triggered at all down in the area of the bottom toolbar. There is probably nothing to be done until it's fixed... Bug is already filed: https://bugs.webkit.org/show_bug.cgi?id=189586

[Lukavyi]

Same problem

[Mattgic]

Same here !

[saradakharel]

The same problem.... there is no need to use this package if it doesn't work for ios(safari)

[dlong500]

It remains to be seen if it will affect this specific issue, but it looks like a patch just landed in webkit that fixes the longstanding problematic behavior where the body is still scrollable with overflow: hidden. If I'm reading this right then any browsers using webkit (including mobile Safari) will finally work the same as all the other major browsers. However, I don't know how long it typically takes for a change in webkit source to land in an iOS release.

[babobski]

Found the issue why it is not working in 12.*, there is an issue with declaring the event listener form within a event listener. If you first declare the listener and use a flag in the other function to indicate if it should prevent the event, it should work.

See the following link for more information.

Also a small note for ios it is only working for me if i attach the event listener to the window instead of the document.

[dlong500]

@babobski I'm not sure I follow what you are saying. Maybe you have a related issue, but this bug occurs even if body-scroll-lock is used without any other event listeners. And looking at the code of body-scroll-lock there is never an event listener declared within an event listener.

Can you clarify what you are stating? Have you been able to modify the body-scroll-lock code so that the demo code does not exhibit this issue?

[babobski]

To be more clear about the issue I ran in to. Today I had the request to make it work, when you slide in a Owl Carousel, that the page could not be scrolled vertically. After some tries of my one, I could not make it work on a iPhone. If I set a overflow hidden on the body I was still able to scroll on a iPhone, it was driving me mad.

So after some searching, I landed at you're plugin. It was almost working for me, only the first time I was still able to scroll the body on the iPhone, but on a older iPad it was working correctly.

Did some more searching so I landed at this issue and after some more at the other I linked to. To make the idea work I used you're plugin in the onDrag event to block the body scroll and removed it on the onDragged event. It was working everywhere but not on the latest iPhone.

In the issue I linked, there is a link to a bug that event.preventDefault is not working in a nested event listener as in my situation in combination with the owlCarousel.

The prevent default at this line was not working correctly for me. I ended not up not using you're plugin only a small bit of it to see if passive events are supported.

I'm currently not at work, but ended up using a solution something like this (did not tested the code below):

var isBlocked = false;

var hasPassiveEvents = false;
if (typeof window !== 'undefined') {
    var passiveTestOptions = {
        get passive() {
            hasPassiveEvents = true;
            return undefined;
        }
    };
    window.addEventListener('testPassive', null, passiveTestOptions);
    window.removeEventListener('testPassive', null, passiveTestOptions);
}

document.addEventListener('touchmove', function(e) {
    if (isBlocked) {
        e.preventDefault();
    }
}, hasPassiveEvents ? {
    passive: false
} : undefined);

$(document).ready(function() {
    $(".owl-carousel").owlCarousel({
        onDrag: function() {
            isBlocked = true;
        },
        onDragged: function() {
            isBlocked = false;
        }
    });
});