如何在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*/
}