6

我正在开发具有可滚动能力的模态窗口，例如 pinterest 窗口。当它们被触发overflow: hidden时body，overflow: auto在模态框容器上定义。这在桌面浏览器上效果很好，但我在 iPad 上的第一次测试（我假设一般来说可能在 iOS 上）揭示了一个问题：

当模态的滚动结束时，如果文档比模态长，则滚动继续。

我尝试这样做的目的是仅在由模式或其容器触发时才接受滚动：

// Disable browser scrolling on iOS
$(document).on('touchmove',function(e) {
    if (($(e.target).attr('id') != id) &&
    ($(e.target).attr('id') != ('modal-'+id))) {
        e.preventDefault();
    }
});

严格来说，它确实有效。模态滚动，当它结束滚动页面时，只有在模态内部滚动时才可能。

你有什么主意吗？

如果你愿意，可以在你的 iPad 上试试（你必须点击模态按钮）：http ://www.onebigrobot.com/beta/altair/transforms-so

先感谢您！

4

1 回答 1

7

小改变是强大的！

position: absolute通过改变position: fixed模态容器（如果需要，还可以在背景的深色蒙版上）解决所有问题。事实上，使用绝对定位时，模式仅起作用，因为按钮位于页面顶部。

使用固定定位的桌面浏览器可以完美运行，而在 ipad 上会发生一些有趣的事情。当模态的滚动结束时，页面的滚动开始工作，但模态始终处于最佳位置。

我希望这个问题对某人有用。

于 2012-05-15T11:28:03.597 回答