I'm trying to stop the body of my page from scrolling (at all) while a modal overlay is open.
The modal covers the entire screen ({position: fixed;top:0;left:0;right:0;bottom:0;}), and it has its own scrolling. However, when I run to the end of the scroll on my modal window, the main window starts scrolling behind it. I've tried everything I can think of to make the body stop scrolling. These things haven't worked:
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%;
}
- using iScroll
- blocking the scroll event of window or body
- blocking the touchstart event on body