My goal is to prevent the body of my page from scrolling altogether when a modal overlay is open.
The modal occupies the entire screen (
{position: fixed;top:0;left:0;right:0;bottom:0;}
) and has its own scroll functionality. However, upon reaching the end of the modal window's scroll, the main window starts scrolling behind it. Despite trying various methods to stop the body from scrolling, none have been successful:
CSS
body {
overflow: hidden;
pointer-events: none;
-webkit-overflow-scrolling: none;
}
#content { /* which contains all the non-modal content of the body */
-webkit-transform: scale(0);
position: relative; left: 100%;
}
- Attempts with iScroll
- Preventing the scroll event on the window or body
- Blocking the touchstart event on the body