Disable scrolling when lightbox is visible

Hi, SLB does not limit page scrolling to allow large images and other lightbox content (e.g. long description text, etc.) to be viewed fully when they extend beyond the browser’s height.

It appears that the lightbox at the link you provided fully covers the underlying page, so no scrolling is visible. Can you provide more detail on why you would want to disable scrolling?

Thanks.

Hi guys,

Thanks for coming back to me on this issue and apologise for the slow reply, I forgot to enable notifications for this post…

The standard behaviour makes total sense, it’s more flexible but in this case what I’m trying to achieve is to cover 100% of the viewport regardless the screen size, be able to navigate pre next image and when I close the lightbox the main content stays at the same point even if you try to scroll while lightbox is enable.

I’ve tried using the script below to lock scroll adding the class to the html tag with the script, that way It achieves the effect desired but I can’t get to disable when you close the lightbox. Must be a conflict with another theme script but I haven’t manage to find out, I’ve tried with both click background and also with the close button and no joy… Here’s the script:

( function($) {
$(document).ready(function() {
$(".gc-noscroll").click(function(e) {
e.preventDefault();
$("html").css("overflow","hidden");
     });
$(".slb_viewer_overlay").click(function(e) {
e.preventDefault();
$("html").css("overflow","auto");
     });
   });
}) (jQuery);

Right now what I did is to add the class slb_viewer_overlay to the first div of my template that way It achieves the effect desired, even though you can see the main content scrolling in the background which is fine and when you close the lightbox the page goes back to the last point… but then pre and next buttons don’t work, anywhere you click it’ll close the lightbox, I’ve tried to force the z-index of navigation div but no luck.

Thanks in advance for your help so far your plugin rocks!

David

• This reply was modified 6 years, 8 months ago by DavidIborra.
• This reply was modified 6 years, 8 months ago by DavidIborra.

Hi, you may be able to accomplish what you want with just some CSS.

SLB adds slb_overlay to the html element’s class attribute when the lightbox is displayed, so you can change the page’s behavior whenever the lightbox is active like so:

html.slb_overlay {
	overflow: hidden;
}

Please not that this is currently classified as a “hack” as the slb_overlay class is not officially documented and may change in a future update.

• This reply was modified 6 years, 7 months ago by Archetyped.