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?

http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened — Andreas Moldskred, Feb 09 '17 at 09:44
It works for background scroll but in the popup I want it to be scrollable. Do you have any idea about that? — KOCH DOEUN, Feb 09 '17 at 10:04
I propose you should do something like: .modal{ overflow:scroll} — Andreas Moldskred, Feb 09 '17 at 10:27
Just checked my materializecss page on mobile (andoird L, chrome) modal window scrolls but background does not. Do you have any codes to share? — pandamakes, Feb 11 '17 at 02:33

score 0 · Answer 1 · answered Feb 09 '17 at 11:36

0

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.

answered Feb 09 '17 at 11:36

Will

51
1
5

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

1 Answers1