ques-Z0Z6KmaG

Search A2Z 24

Question : How to disable body scroll not hide the scroll?

I'm trying to disable the html/body scrollbar of the parent while I'm using a lightbox(popup).The main word here is disable I don't want to hide it with overflow: hidden;.

Why because overflow: hidden makes the site jump.

asked September 13, 2015

1 Answers

Dispalying 1 to 1 of 1 |

If the page under the overlayer can be "fixed" at the top, when you open the overlay you can set

body { position: fixed; overflow-y:scroll }

you should still see the right scrollbar but the content is not scrollable. When you close the overlay just revert these properties with

body { position: static; overflow-y:auto }

I just proposed this way only because you wouldn't need to change any scroll event


You could also do a slight improvement: if you get the document.documentElement.scrollTop property via javascript just before the layer opening, you could dynamically assign that value as top property of the body element: with this approach the page will stand in its place, no matter if you're on top or if you have already scrolled.

CSS
.noscroll { position: fixed; overflow-y:scroll }
Javascript
$("body").css("top", -(document.documentElement.scrollTop) + "px")
         .addClass("noscroll");
See comments (0) | Comment
Answered 11 Months ago
Dispalying 1 to 1 of 1 |

Write your Answer write code <pre class="brush: xml">---code---</pre>

Login as a member to access answering block !! click-here
loading...

Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×