javascript - 防止底层 div 在 iOS Safari 中滚动

Question

我有一个 div，高度为 100%，视口(viewport)高度为 70%，overflow:scroll。

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

我用 position:absolute 和整页高度创建了一个 div。如果 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。这可以防止滚动 Action 到达下面的“层”。

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