如何在iPad上禁用模态蒙版后面的滚动

How to disable scrolling behind a modal mask on iPad?

本文关键字：滚动 模态 iPad      更新时间：2023-09-26

我正在创建一个web应用程序，也应该在iPad上工作。现在在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;
}

元素z-grid需要激活位置以启用z-index。尝试position: relative;或position: absolute;。因为我看不见你的标记，所以我不能说具体是哪一个

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

我看过很多关于在模态后面的ipad上禁用body滚动的答案，没有一个被发现是合适的，特别是当模态上有一个可滚动的div时，我发现这个javascript逻辑的组合来自另一个SO用户，然后在弹出窗口关闭上卸载事件处理程序。

在弹出窗口/对话框中打开:

//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');

上面提到的scrollable只是让你需要滚动的元素免除逻辑，如果元素有css类集。

在我的情况下，我有一个可滚动的div在我的弹出，导致各种各样的问题，所以禁用背景滚动，但仍然允许滚动在对话框可滚动的div内，确保你添加一个scrollable类到你的可滚动的div，所以它被忽略。

相关文章：