在模式模式下滚动时，防止身体在触摸设备上滚动 [英] Prevent body scroll on touch devices when scrolling on modal

问题描述

我正在使用一个Web应用程序，该应用程序使用许多模式叠加层以及模式中可滚动的内容.在触摸设备上，尤其是在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

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