Prevent body scroll on touch devices when scrollin

问题:

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