Prevent base div from scrolling in Safari iOS

Question

I have a div , 100% height, view height 70% and overflow:scroll .

Now I want to create an overlay div that touch devices can use to scroll the entire page, not the div .

I created a div with position:absolute and full page height. If Android users drag this div , the whole page scrolls as expected. However, on iOS7, the base div scrolls, for example, the touch event passes through 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 the div page to scroll through the div , the scroll of the div scrolls instead of the page.

Does anyone know a solution for this?

Answer 1

In the .pageScroller scroller .pageScroller add overflow-y: scroll; and -webkit-overflow-scrolling: touch; along with postive z-index . This prevents the scroll action to reach the “layer” at the bottom.

 .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 out this JSfiddle: http://jsfiddle.net/R9Ut6/