Prevent body scroll on touch devices when scrolling on modal

流过昼夜 提交于 2019-12-20 03:33:10

问题


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.

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?


回答1:


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



来源:https://stackoverflow.com/questions/25016369/prevent-body-scroll-on-touch-devices-when-scrolling-on-modal

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!