防止底层div在iOS Safari中滚动

Question

我有一个div100%的高度,70%的视口高度,和overflow:scroll.

现在我想创建一个覆盖div,哪些触摸设备可以用来滚动整个页面而不是div.

我创建了一个divwith position:absolute和整页高度.如果Android用户拖动它div,整个页面会滚动,就像预期的那样.但是,在iOS7上,底层div是滚动的,就像触摸事件正好通过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);
}

如果您使用iOS7并div在滚动页面上拖动div,则滚动div滚动而不是页面.

有人知道解决方案吗？

Answer 1

在您的.pageScrollerscroller元素上,添加overflow-y: scroll;和-webkit-overflow-scrolling: touch;属性以及postive z-index.这可以防止滚动动作到达下面的"图层".

.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;
}

检查这个JSfiddle:http://jsfiddle.net/R9Ut6/