How to prevent background scrolling when Materializecss modal open on mobile browsers?

Question

How to prevent background scrolling when materializecss modal open on mobile platforms? On desktop browsers the background is prevented from scrolling and works as it should.

On mobile browsers (Safari ios, Chrome ios, etc), when a modal is opened and using your finger to scroll it, the background also scrolls as does the modal. How do I prevent that?

Answer 1

Try this, Wrap your page into a div , and when the modal is open you add overflow: hidden in the div . And be sure if the modal doesn't inherit the overflow from the page wrapper.

I hope it helps.