Overflow with fixed content overlaying: content behind still scrolls?

HTML & CSS
1

I am trying to add a pop-up (which will eventually contain a form) that completely overlays a page’s content.

I have the css added to the wrapping section:

position:fixed; top:0;left:0;height:100vh;width:100vw;z-index:99999

It overlays the underlying content like it should, and it scrolls like it should, but I still see the scroll bar, and am able to scroll the content behind it (even though I can’t see it).

How do I avoid this? Essentially, I want to hide the default scrollbar that would scroll the main content.

Do I have to hide all of the underlying content, as well?

I have a mockup on a staging server here. I have a button in the bottom right “Edit.” (You have to click button twice, for a reason I have yet to figure out).http://dev.coosguide.com/dev5/ice-cream/

2

Did something get missed?

3

Terribly sorry. I added a hyperlink to the OP, but it’s also here.

4

You can dynamically add a class to the body tag at the same time you open the modal and use that class in your css to disable the body scrollbars while the modal is open.

More info here:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.