overflow-y:hidden IOS issue with inner scrolling div

Question

I am building a responsive site that has overlays slide out from the side. The issue is on mobile these overlays need to be able to scroll but i dont want the page behind to scroll. On desktop setting overflow:hidden works to stop the page from scrolling but still allow the slide out div to scroll. However, in IOS this property is not working. The base page is still scrollable. I have created a jsbin below. Can someone tell me how to get the black div to scroll on IOS but prevent the base page from scrolling? It works fine on desktop but not on mobile.

http://jsbin.com/isayuy/4/

Thanks

Solution 1

You have to add this to your CSS:

html { height:100%; overflow:hidden; }
body { height:100%; overflow:hidden; }

That works for me. See here: http://jsbin.com/isayuy/10/

Solution 2

The solution from @Tim Wasson works for me.

As another option, I'm wondering if there's a reason why you don't apply position:fixed to the body tag when the slide-outs are visible?

http://jsbin.com/isayuy/6

Appologies if I'm missing something obvious.

Good luck!

Solution 3

Here's what I'm doing - this solution prevents the background from scrolling, while retaining the initial position (i.e. it doesn't jump to the top).

    preventScroll : function(prevent) {
        var body = $('body'), html = $('html'), scroll;
        if (prevent) {
            var width = body.css('width');
            scroll = window.pageYOffset;
            // This is all you need to do to prevent scroll on everything except iOS.
            html.css({ 'overflow': 'hidden'});
            // For iOS, change it to fixed positioning and make it in the same place as
            // it was scrolled.
            // For all systems, change max-width to width; this prevents the page getting
            // wider when the scrollbar disappears.
            body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
        } else {
            scroll = -parseInt(body.css('top'));
            html.css({ 'overflow': '' });
            body.css({ 'position': '', 'top': '', 'max-width': '' });
            window.scrollTo(0, scroll);
        }
    },

This will cause problems if you resize (rotate phone) while scroll is prevented; I also have a resize event which calls preventScroll(false) and then preventScroll(true) to update the position in that case.

Solution 4

yes. it's working.and added the following code also

if (window.location == window.parent.location &&
    navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('#orderpop').attr('style', 
                        '-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;');
}

preventScroll : function(prevent) {
    var body = $('body'), html = $('html'), scroll;
    if (prevent) {
        var width = body.css('width');
        scroll = window.pageYOffset;
        // This is all you need to do to prevent scroll on everything except iOS.
        html.css({ 'overflow': 'hidden'});
        // For iOS, change it to fixed positioning and make it in the same place as
        // it was scrolled.
        // For all systems, change max-width to width; this prevents the page getting
        // wider when the scrollbar disappears.
        body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
    } else {
        scroll = -parseInt(body.css('top'));
        html.css({ 'overflow': '' });
        body.css({ 'position': '', 'top': '', 'max-width': '' });
        window.scrollTo(0, scroll);
    }
}

View more solutions