HTML Attach Scrollbar to Modal Content

Question

I am creating a page similar to Pinterest where items flow vertically as the user scrolls. When the user clicks on one of these items, a modal with related content opens. Currently, the modal is an absolutely-positioned div.

Both the modal and the background (item list) are longer than the user's browser height. How can I make the scroll bar on the browser represent the modal div's height and not the background's height, and then set it back when the modal is closed?

I tried hiding the background and showing the modal, but then when I hide the modal and show the background it scrolls the page all the way back up again. I'd like to keep the background slightly visible, like on Pinterest's main page.

Answer 1

I would do something like this for the modal div:

<div style="background-color: rgba(255,255,255, 0.93);position:fixed;
overflow-x:auto;overflow-y:scroll;bottom:0;left:0;right:0;top:0;
z-index:9999;"></div>

It creates a div that fills the whole document and then adds the scrollbar for the middle content. As soon as you show the modal you need to set the main body (the background) of your page to:

style="overflow:hidden"

You could use jquery like:

$("body").css("overflow", "hidden");

It is important to get the main body to set the overflow to hidden in order to remove the other scroll bar. When I tested this in Firefox, it worked. I had a div as described and then set the body style and it worked. I was also in the middle of the document when I tested it. The background document stayed where it was and didn't move.

Answer 2

Give the modal div a fixed height and a css property of overflow:scroll