Question

我正在开发具有可滚动功能的模态窗口，就像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();
    }
});

它确实很有效。模态滚动，当它结束滚动页面时，只有在模态内滚动时才可以。

你有什么想法吗？

如果需要，请在你的ipads中尝试（你必须点击模态按钮）：http://www.onebigrobot.com/beta/altair/transforms-so

提前谢谢！

Answer 1

小变化很强大！

所有问题都解决了在模态容器上更改position: absolute position: fixed（如果需要，还可以在背景的暗掩码上）。实际上，通过绝对定位，模态仅起作用，因为按钮位于页面顶部。

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

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

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

1 个答案: