如何在iPad上禁用模態蒙版后面的滾動？

Question

我正在創建一個也可以在iPad上運行的Web應用程序。 現在使用iOS 5甚至滾動工作正常。 但我的問題是，如果我有一個模態窗口，即使其他事件被禁用，也會啟用模態掩碼后面的滾動。 有誰知道如何關閉模態蒙版后面的滾動？

例：

已啟用滾動的網格：

.z-grid{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}

模態面具：

.z-modal-mask {
   background:#E0E1E3 none repeat scroll 0 0;
   height:100%;
   left:0;
   opacity:0.6;
   position:absolute;
   top:0;
   width:100%;
   z-index:30000;
}

Answer 1

我已經看了很多關於禁用在模態后面的iPad上滾動身體的答案，並且沒有一個被發現適合特別是在模態上有一個可滾動的div時，我發現了來自另一個SO用戶的這個javascript邏輯的組合加上然后在彈出窗口關閉時取消附加事件處理程序就可以了。

在彈出/對話框打開時：

//uses document because document will be topmost level in bubbling
$(document).on('touchmove', function (e) {
    e.preventDefault();
});
//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart', '.scrollable', function (e) {
    if (e.currentTarget.scrollTop === 0) {
        e.currentTarget.scrollTop = 1;
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
        e.currentTarget.scrollTop -= 1;
    }
});
//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove', '.scrollable', function (e) {
    e.stopPropagation();
});

在彈出/對話框關閉：

$(document).off('touchmove');
$('body').off('touchstart', '.scrollable');
$('body').off('touchmove', '.scrollable');

如果元素具有css類集，則上面提到的scrollable元素只是讓你需要滾動的元素免於邏輯。

在我的情況下，我的彈出窗口中有一個可滾動的div，導致各種問題，因此要禁用背景滾動但仍允許在對話框可滾動div中滾動，請確保向可滾動div添加scrollable類，以便忽略它。

Answer 2

元素z-grid需要激活位置才能啟用z-index。 嘗試任一position: relative; 或者position: absolute; 。 我不能確切地說哪一個，因為我看不到你的標記:)

.z-grid{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    position: relative; /*or absolute*/
}