How to remove overflow (scroller bars) of an overlay image viewer

Question

Removing the overflow (scroller bars x and y) of the overlay when it's open, and then once the overlay (image viewer) is closed, body makes the overflow visible (scrollers bars x and y) (obviously before the overlay is triggered by click on an image, the scroller of the body are visible.

example:

<style type="text/css">
body { overflow:visible;}
div.overlay {position: fixed; overflow-y:hidden; overflow-x:hidden;} </style>

Thanks, I know. I'm shit at coding :?

Answer 1

You can use jquery to do this. Where you initialize your overlay, add this:

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

Where you close the overlay, add this:

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

Hope this helps.