Page shouldn't be scrollable when lightbox is opend

not to fix the page – but to fix the lightbox with its image.

.mfp-wrap {  position: fixed !important }

but look if this works on mobile too – because fixed positioning can be ugly
than use instead

html:not(.avia_mobile) .mfp-wrap {  position: fixed !important }

can you show me the link to that?

the magnificPopup event must add the overflow:hidden to html .
hm : just brainstorming…

a very simple quick and dirty method would be to have a non transparent background ;)

.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 1;
}

Did you use a different lightbox plugin ? That would be nice to know

but it isn’t that terra messflug at ? This is not enfold

the magnific popup script sets the html to overflow-y scroll.
that has the reason not at last because otherwise on open the lightbox the background will jump to the right ( the width of the scroll bars)
This looks ugly too.

i’m on that topic – but yet i do not know how to have a child theme friendly solution.
I have to read more in the magnific popup api documentation to see if there was a possibility. The code inserted from enfold to html (overflow-y: scroll) is inline code too – on that testpage of Semenovs Testpage is set via css.

the scrollbars have a given width ( guess something like 17px)
the overflow-y : scroll rule sets scrollbars even if the content fits into screen-height !
Some browsers ( guess safari or the mobile browser ) hide the scrollbars on lightbox open (even if content is bigger than screen-height) if there wasn’t a overflow setting ( or set to auto)

try this: – and please ismael say if there are some faults or upgrades on that code
i tried it first with attr or removeAttr but simple css was in success
but the real hint was to the .mfp-bg

add_action('wp_footer', 'custom_lightbox_script');
function custom_lightbox_script(){
?>
<script type="text/javascript">
(function($) {
    function a() {
        $('body').on('click', '.lightbox-added', function() {
			if($('.mfp-bg').length >= 1) {
				$('html').css("overflow-y", "hidden");
			} 
		});
		
		$('body').on('click', function() {
			setTimeout( function() {
				if($('.mfp-bg').length == 0) { 
					$('html').css("overflow-y", "scroll");
				}
			},500);		
		});
             }
	a(); 
})(jQuery);
</script>
<?php
}

you don’t need css settings in quick css because it works about css ( inline )

see here in action: https://webers-testseite.de/weber/lightbox/