ques-Z0Z6KmaG

Search A2Z 24

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

X

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 2 Years 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...

×