防止底层div在iOS Safari中滚动

Question

我的div高度为100％，视口高度为70％，overflow:scroll。

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

我创建了一个div 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

在.pageScroller滚动条元素上，添加overflow-y: scroll;和-webkit-overflow-scrolling: touch;属性以及正面z-index。这可以防止滚动动作到达＆＃34;层＃34;下面。

.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/