CODEWITHSUNDEEP
htmlcssios7scrolloverlay
user2983883
user2983883

Reputation:

iOS7: Scroll in fixed overlay causes body scrolling

I am just debugging a weird scenario where the scroll movement in an overlay is passed to the underlying element once it reaches its bounds. So when the overlay has no room for scrolling (hence when you hit the elastic top/bottom part), the background layer begins to scroll.

I tried several solutions, and also checked out this one: Prevent body scrolling but allow overlay scrolling

But no fix so far. I have attached a plunker, so when you open it in your iphone or ipad you should see the effect.

Imagine we have following page structure:

    <html>
        <body>
            <nav> <!-- The overlay -->
                <div></div> <!-- The scrollable container with appropriate overflows -->
            </nav>
            <div class="page-wrap"></div> <!-- Main content starts to scroll when overlay reaches bounds or ios top/bottom bars are displayed -->
        </body>
    </html>

Cheers!

Plunkr: http://run.plnkr.co/g4WQrNibWNbz5lYr/

**NOTE: It seems to get buggy when the ios title and bottom bar get displayed. I will try to add a video for further description **

Upvotes: 5

Views: 2031

Answers (2)

Anulal S
Anulal S

Reputation: 6625

Javascript Fix

We can catch the touch events on the overlay and stop in propagating to other elements.

<nav id="overlay"> <!-- The overlay -->

document.getElementById('overlay').addEventListener("touchmove", function(e) {
        e.preventDefault();
}, true);

This prevents the scrolling of div.page-wrap when #overlay is active.

Upvotes: 0

XaviBonell
XaviBonell

Reputation: 31

Yep it's annoying. Try using -webkit-overflow-scrolling: touch for the overlay and -webkit-transform: translateZ(0) on your page-wrap. Hope it helps.

Upvotes: 3

Related Questions