javascript - iPad禁用文档滚动但不禁用div溢出滚动

Question

我正在开发具有可滚动功能的模态窗口，例如 pinterest 的。当它们被触发时，在 body 上定义 overflow: hidden 并在模态框容器上定义 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

提前致谢!

Answer 1

小的改变是强大的!

所有的问题都解决了改变 position: absolute 到 modal container 上的 position: fixed (如果需要的话，也可以在背景的深色 mask 上)。事实上，使用绝对定位时，模态窗 Eloquent 起作用，因为按钮位于页面顶部。

在固定位置的桌面浏览器上工作得很好，而在 ipad 上会发生一些有趣的事情。当模态的滚动结束时，页面的滚动开始工作，但模态始终位于顶部。

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