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

问题描述

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

I'm working on a web app that uses lots of modal overlays with scrollable content in the modal . On touch devices, and in particular on Android, the mobile browser wants to scroll the body content behind the modal instead of the actual scrollable content area within the modal. Or, if the content does scroll, when it hits the top or bottom of the scrollable area, the scrolling then continues on the body. I don't want the body to scroll at all under any circumstances when the modal is visible/active.

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

I tried to prevent this with the following code but it seems to have no effect (in this case, $context is the document root):

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

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

Anyone have other ideas/insight?

推荐答案

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

Is there anything wrong with the provided z-index of your elements? Maybe the Modal itself or an inner container isn't stacked on top of the body-text

这篇关于在模态上滚动时防止触摸设备上的身体滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！