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

元素z-grid需要激活位置才能启用z-index。尝试position: relative;或position: absolute;。我无法确切地说出哪一个，因为我看不到你的标记：）

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

Answer 2

我已经看了很多关于禁用模式后面的iPad上的身体滚动的答案，并且没有发现任何适合特别是当模态上有可滚动的div时，我找到了this javascript logic from another SO user的组合加上然后在弹出窗口关闭时取消附加事件处理程序就行了。

打开弹出窗口/对话框：

//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中滚动，请确保添加scrollable类到你的可滚动div，所以它被忽略了。

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

2 个答案: