5

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 **

Community
  • 1
  • 1
  • Just found out that this behavior occurs even on http://www.pinterest.com/ –  May 27 '14 at 14:04

2 Answers2

3

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.

XaviBonell
  • 31
  • 1
  • How does this work? `-webkit-overflow-scrolling: touch` only makes the scrollable element more fluid and `-webkit-transform: translateZ(0)` just enables hardware acceleration. – evolutionxbox Mar 16 '16 at 12:18
0

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.

Community
  • 1
  • 1
Anulal S
  • 6,534
  • 5
  • 26
  • 33