Question 206369 in CSS Question posted in
Some basic documentation can be found here.

Css – The mecahnism about how `overflow:hidden` on `body`element prohibits user from scrolling

I was making my blog,
and wanted to add functionality which prohibit user from scrolling while the modal is open.
So I found out that setting overflow:hidden on body element works for this.
But how?? I know the overflow property’s default value is visible. It allows the contents to overflow out of the box.
but it seems that computed body element’s height is stretched along with its contents and completely contains all of them in itself. and there was no overflowed contents.
enter image description here
Furthermore, the scroll bar position remains unchanged after closing modal.
enter image description here
enter image description here

So I wonder how the overflow:hidden works for this.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I realized that there is nothing to wrong in my understanding. I simply overlooked the specific value of the hidden property within the overflow property. There is nothing overflowed in body element. I was just confused concept of 'overflowing' with the stretch due to the boxes in the body element. Accroding to developer.mozilla.org/en-US/docs/Web/CSS/overflow#values , the hidden value simply takes the scroll-bar away from the element. That's all.


  2. 0

    This prevents the scrolling functionality because the body tag encompasses all the page content not just the modal. So by making all (x & y) overflow hidden, the body copy that would have previously been scrollable is now hidden.

    Login or Signup to reply.
  3. 0

    You should implement such a mechanism by using JavaScript to set the "overflow-y: hidden" on body when the menu is open and set it back to auto when it is closed. You should also set menu’s overflow to scroll or auto. If I misunderstood your answer please provide some more details.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search