Prevent underlying div from scrolling in iOS Safari

Question

I have a div that is 100% height, 70% viewport height, and overflow:scroll.

Now I want to create an overlaying div which touch devices can use to scroll the whole page instead of the div.

I created a div with position:absolute and full page height. If Android users drag on this div, the whole page scrolls, like expected. However, on iOS7 the underlying div is scrolled, like the touch event goes right trough the div.

JSFiddle

.scrollDiv{
    width:100%;
    height:200px;
    overflow-y:scroll;
    border:solid 1px #f00;
    -webkit-overflow-scrolling: touch;
}
.pageScroller{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:50%;
    background-color: rgba(0,0,0,0.7);
}

If you use iOS7 and drag on the page div over the scrolling div, the scrolling div is scrolled instead of the page.

Does anybody know a solution for this?

Answer 1

On your .pageScroller scroller element, add the overflow-y: scroll; and -webkit-overflow-scrolling: touch; attributes, together with a postive z-index. That prevents the scroll action to reach the "layer" beneath.

.pageScroller{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:50%;
    z-index: 1;
    background-color: rgba(0,0,0,0.7);
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
}

Check this JSfiddle: http://jsfiddle.net/R9Ut6/