javascript - 如何防止滚动窗口/主体 "through"模态 div？

这是我的布局的简化版本:

<body>
    [... a bunch of content ...]
    <div id="modal-overlay">
    </div>
</body>

body包含足以让整个页面滚动的内容。

#modal-overlay样式如下:

#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

为了响应用户操作，我将显示 #modal-overlay通过设置 display: block;

#modal-overlay然后填充整个视口(viewport)。

问题来了...

有时，当您在 #modal-overlay 上垂直滑动时- 它的内容会按原样滚动。

但是，有时 body而是滚动，#modal-overlay 中的内容根本不滚动。就好像我在滚动 body 通过 #modal-overlay ，这正是我不想要的。

事实上 - #modal-overlay 似乎完全随机或 body滚动以响应滑动手势。

我读过一些技巧(例如，将 overflow:hidden 应用于 body，但我不想这样做，因为它会丢失正确的滚动位置，并且还会导致其他问题。)我还希望有一个适用于任意数量嵌套层的解决方案。我确实在努力防止滚动最上层，而不是摆弄底层。

这在 iOS 上尤其成问题，因为滚动 body降低浏览器 chrome 的高度，这会扩展视口(viewport)，这会扰乱 #modal-overlay 的布局，因为它的大小可以填充视口(viewport)。啊啊啊。

提前感谢您的任何建议或指导!

最佳答案

我还没有尝试在 ios 上实现这个，但你至少可以尝试使用 slimscroll jquery plugin如果您正在处理多层并防止滚动其他层。希望对你有帮助

关于javascript - 如何防止滚动窗口/主体 "through"模态 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47174631/