在模态上滚动时防止触摸设备上的身体滚动答案

【问题标题】：Prevent body scroll on touch devices when scrolling on modal在模态上滚动时防止触摸设备上的身体滚动
【发布时间】：2014-09-20 21:18:10
【问题描述】：

我正在开发一个 Web 应用程序，该应用程序在 modal 中使用大量带有可滚动内容的模态叠加层。在触摸设备上，特别是在 Android 上，移动浏览器希望滚动模态后面的正文内容，而不是模态内的实际可滚动内容区域。或者，如果内容确实滚动，当它到达可滚动区域的顶部或底部时，滚动会在正文上继续。当模式可见/活动时，我不希望正文在任何情况下滚动。

我尝试使用以下代码来防止这种情况，但似乎没有效果（在这种情况下，$context 是文档根目录）：

$context.on('touchmove touchstart touchend', '[data-modal-content]', function(e) {
    e.stopPropagation();
});

有人有其他想法/见解吗？

【问题讨论】：

你有没有让这个工作？当我在模态中滚动时，我在后台滚动正文时遇到了同样的问题。
我想我可以通过将主体上的 css 更改为 overflow-y:hidden; 然后在模式关闭时将其切换回来。

标签： mobile modal-dialog touch

【解决方案1】：

提供的元素 z-index 有什么问题吗？也许模态本身或内部容器没有堆叠在正文顶部

【讨论】：

我已经检查过了，没有 z-index 问题。一切都正确堆叠。如果您在具有两个或多个可滚动区域的单个 z-index 图层上使用鼠标滚轮，它的行为有点像。当您点击可滚动区域的底部或顶部时，滚动会在正文滚动条上继续。但是在桌面上，我完全禁用了身体上的滚动。然而，这似乎并没有禁用触摸滚动。