Geek asks and answers

HTML Attach a scrollbar to modal content

I create a page similar to Pinterest, where elements move vertically as the user scrolls. When a user clicks on one of these elements, modal related content opens. The modal is an absolutely positioned div.

Both the modal and the background (list of elements) are longer than the height of the user's browser. How to make the scroll bar in the browser display the modal height of the div, rather than the background height, and then set it back when the modal is closed?

I tried to hide the background and show the modal, but then when I hide the modal and show the background, it scrolls the page all the way back. I would like the background to be a little visible, as on the Pinterest main page.

+3
source share
2 answers

I would do something similar for a 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>

Creates a div that fills the entire document, and then adds a scroll bar for the middle content. Once you show the modal, you need to install the main body (background) of your page:

style="overflow:hidden"

You can use jquery, for example:

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

It is important that the main body set the overflow to hidden to remove another scrollbar. 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 remained where it was and did not move.

+5
source

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

+2
source

More articles:


All Articles