I have a div that has a height of 100%, equivalent to 70% of the viewport height, with an overflow:scroll property.
Now I would like to add an overlaying div that touch devices can use to scroll the entire page instead of just the div.
I attempted to create a div with a position:absolute and set it to full page height. When Android users swipe on this div, the whole page scrolls as intended. However, on iOS7, the underlying div is scrolled, almost like the touch event passes through the div.
.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);
}
When using iOS7 and dragging on the page div over the scrolling div, the scrolling div moves instead of the entire page.
Does anyone have a solution for this issue?