Search code examples
javascriptcssscrolloverflowoverlays

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

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 :?

Solution

  • 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.