Disable touch scrolling when modal is open

Question

I'm using full-screen modals on my site on mobile. The problem is that touching the modal will cause the body page to move even though it's overflow:hidden;

Here's what bootstrap says about that:

Support for overflow: hidden on the element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the content will begin to scroll.

What can I do to prevent that?

Setting the body to position:fixed causes the scroll to jump to the top in an ugly way. What's the best solution if anyone came up with one?

Answer 1

I had the same question myself before.

What I did is changed the body to overflow:hidden and fixed height equal to modal height and remembered document scroll position. After closing the modal, I've applied remembered scroll position back and height to auto .

It is so complicated because I needed my modals to be bigger than window and I wanted to be able to scroll the modal.