Essential grid lightbox: Main scrollbar is not disabled when opening a lightbox

[KEIcie_GSZMayday]

I am using an essential grid, where on an item click a page is loaded in an iframe.
When I open a lightbox, containing the iframe, I would like the scrollbar of the main page to be disabled. If this doesn’t happen, multiple scrollbars appear and the user can scroll a page they’re not even seeing.

When I test the grid and the lightbox in the grid settings, the scrollbar does disappear. However, when the grid is displayed on my actual website, this does not happen anymore. Because of this, I suspect the issue might be related to x theme.

There’s probably some jquery code for fancybox to fix this, however I could not make it work.

Thanks in advance!

[nabeel]

Hi Floris,

Thank you for reaching out to us. You can disable all scrollbars by forcing the Lightbox fullscreen display, please follow https://www.themepunch.com/faq/extending-lightbox-options-in-essential-grid/#force_fullscreen

Hope this helps!

[KEIcie_GSZMayday]

Hi, thanks for the quick reply.
Of course setting full screen works, but this is not desirable, as I do not want full screen.

I did find a solution, so I’m sharing it here for future reference for others with the same problem.
In the global css, I set:

body {
    max-height: 100vh;
}

Alternatively, one could set the max-height to “body.esgbox-active”, however, this causes the page to be scrolled up whenever a lightbox is opened.

Fancybox sets the body overflow to hidden when opening a lightbox, causing the scrollbar to disappear, however, if the height of the body still overflows the height of the screen, the scrollbar is not removed. Thus, setting a maximum height of 100% the view height solves this problem.

[KEIcie_GSZMayday]

I just noticed that this has caused the parrallax effect to not work anymore.
Do you have any idea how I could fix that?

[nabeel]

Hey Floris,

You can remove your customization and instead you can use the lightbox events to remove the scrollbar using custom JS. Go to your ess grid’s settings, navigate to API/JavaScript tab and paste the following code in the Custom JavaScript section (see https://www.themepunch.com/essgrid-doc/custom-css-javascript/#custom-javascript):

jQuery(document).on('beforeShow.fb', function( e, instance, slide ) {
	jQuery('html').addClass('esg-lightbox-open')
});
jQuery(document).on('afterClose.fb', function( e, instance, slide ) {
	jQuery('html').removeClass('esg-lightbox-open');
});

Then add the following code in the Theme Options > CSS:

.esg-lightbox-open {
    overflow: hidden;
}

This will hide all the scrollbars when the lightbox is in open state, Please clear all caches including your browser’s cache after adding the code.

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Thank you for understanding!

[KEIcie_GSZMayday]

This fixed my issue and now parallax works as well!

Thank you

[christian]

Glad to hear that helped.