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

提前感谢！

- dgnin

Answer 1

微小的变化也是强大的！

只需将模态框容器（以及必要时背景的黑色遮罩）中的position: absolute更改为position: fixed，即可解决所有问题。事实上，使用绝对定位时，模态框仅在按钮位于页面顶部时才能正常工作。

使用固定定位，桌面浏览器可以完美地工作，在iPad上也有一些有趣的现象。当模态框的滚动结束后，页面的滚动开始工作，但模态框始终保持在良好的位置上方。

希望这个问题对某人有所帮助。

- dgnin