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

score 18 · Accepted Answer · answered Jun 28 '13 at 20:45

18

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/

answered Jun 28 '13 at 20:45

Tim Wasson

3,606
16
16

There's a few alternatives to stop bouncing, depending on of you want to stop the whole body, certain elements (but retain others, like the scrollable div), etc. See this other thread for an in depth discussion of the problem and possible solutions. http://stackoverflow.com/questions/12663576/prevent-scroll-bounce-for-the-body-element-but-keep-it-for-child-elements-in-io – Tim Wasson Jun 28 '13 at 22:18
David Taiaroa's advice solved the bouncing issue for me. I added the position fixed to the html selector – kretzm Jul 25 '15 at 03:07
The scrolling in the div is no longer smooth. So if you swipe quickly then the page should smoothly keep scrolling for a bit longer. – Kristjan Liiva Dec 15 '15 at 15:29

score 2 · Answer 2 · edited May 23 '17 at 11:52

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!

edited May 23 '17 at 11:52

Community

1
1

answered Jun 28 '13 at 20:54

David Taiaroa

25,157
7
62
50

score 1 · Answer 3 · answered Jul 01 '16 at 13:30

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.

score 1 · Answer 4 · edited May 30 '17 at 15:54

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);
    }
}

overflow-y:hidden IOS issue with inner scrolling div

4 Answers4