Question: 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](https://stackoverflow.com/questions/9280258/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 \*\*

Answer: 
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.
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.