防止iOS Safari中的底层div滚动

Question

我有一个100%高度、70%视窗高度且带有“overflow:scroll”的

元素。

我想创建一个覆盖的

元素并使触摸设备用它滚动整个页面，而不是使用

元素本身。

我创建了一个具有“position:absolute”和全屏高度的

元素。如果Android用户在该

元素上拖动，则整个页面会像预期的那样滚动。然而，在iOS7上，底层的

元素被滚动，就好像触摸事件直接穿过了该元素。

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，并且在页面上拖动一个覆盖在滚动

上的

，则会滚动滚动

而不是整个页面。是否有人知道如何解决这个问题？

- NLAnaconda

---

在fiddle上发布您的代码。 - Charlie

我已经更新了我的帖子。 - NLAnaconda

Answer 1

在您的 .pageScroller 滚动元素中，添加 overflow-y: scroll; 和 -webkit-overflow-scrolling: touch; 属性，并附加一个正值 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;
}

Check this JSfiddle: http://jsfiddle.net/R9Ut6/

- Marcus Olsson