防止底層div在iOS Safari中滾動

Question

我有一個100％高度，70％視口高度和overflow:scroll的div 。

現在我想創建一個覆蓋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 。 這可以防止滾動動作到達下面的“圖層”。

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