javascript - Prevent underlying div from scrolling in iOS Safari -
i have div
100% height, 70% viewport height, , overflow:scroll
.
now want create overlaying div
touch devices can use scroll whole page instead of div
.
i created div
position:absolute
, full page height. if android users drag on div
, whole page scrolls, expected. however, on ios7 underlying div
scrolled, touch event goes right trough 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); }
if use ios7 , drag on page div
on scrolling div
, scrolling div
scrolled instead of page.
does know solution this?
on .pagescroller
scroller element, add overflow-y: scroll;
, -webkit-overflow-scrolling: touch;
attributes, postive z-index
. prevents scroll action reach "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 jsfiddle: http://jsfiddle.net/r9ut6/
Comments
Post a Comment