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

1
  • Just found out that this behavior occurs even on pinterest.com
    – user2983883
    May 27, 2014 at 14:04

2 Answers 2

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.

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. Mar 16, 2016 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.

2
  • It also prevents any overflow scrolling inside the overlay. Mar 16, 2016 at 12:18
  • @evolutionxbox - what about if we try the .page-warp with a higher z-index?
    – Anulal S
    Mar 28, 2016 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.