我正在开发具有可滚动功能的模态窗口,例如 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
提前致谢!
最佳答案
小的改变是强大的!
所有的问题都解决了改变 position: absolute
到 modal container 上的 position: fixed
(如果需要的话,也可以在背景的深色 mask 上)。事实上,使用绝对定位时,模态窗 Eloquent 起作用,因为按钮位于页面顶部。
在固定位置的桌面浏览器上工作得很好,而在 ipad 上会发生一些有趣的事情。当模态的滚动结束时,页面的滚动开始工作,但模态始终位于顶部。
我希望这个问题对某人有用。
关于javascript - iPad禁用文档滚动但不禁用div溢出滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10598961/