masonry gallery issue when mage is open

i think he/she is talking about the background behind the lightbox – the state of overflow-y : scroll on active lightbox.

try this in your child-theme functions.php:

add_action('wp_footer', 'no_background_scroll_on_lightbox_open');
function no_background_scroll_on_lightbox_open(){
?>
<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
}

i have to see the site – to give you better instructions.
the scrollbars in the lightbox should not be affected – how would you show then all the content if it is bigger than lightbox window.
the scrollbar in the background is gone on opended lightbox by that code above ( overflow-y : hidden) – on closing the lightbox it must be there.
see website in iframe f.e: https://webers-testseite.de/my-website/

only moderators can see private content – so wait til mods are here. Sorry without the page i could not help you

thanks –
when does the problem come up for you?
with the lightbox open – or when the lightbox is closed?

With the lightbox open – it’s the way I want it: the background doesn’t scroll away – there is no scrollbar visible on the right.

When the lightbox is closed : I have to scroll down to get to the content – then the scrollbar appears.
But that depends on the browser too! Firefox does not show it on scrolling – chrome does – safari too.
You can always have the scrollbar displayed regardless of whether a content is smaller or larger than the page height.

BUT: this could solve the problem on PC –
but then it is on MAC

this is a hard to find a device independent solution.
with the above code it has the negativ jumping scrollbar issue on MAC

i think this is one reason Kriesi does not have overflow-y: hidden on html when lightbox is open.
maybe you take better ismaels advice to completely overlay the background – so you don’t see if it is scrolling or not.
Or work a lot with fixed positioning.

This way: without the overflow-y snippet

/*** these next two rules seems to be obsolete now  - tests are still running****/
.mfp-zoom-out-cur {
    height: 2000vh;
    overflow: hidden;
}

.mfp-bg {
    height: 2000vh !important;
}

try first only with these rules :

.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader {
    opacity: 0.8;
}

.mfp-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  overflow: hidden;
}

.mfp-arrow {
  position: fixed
}

.mfp-wrap + #wrap_all {
  position: fixed
}

img.mfp-img {
  max-width: 70vw;    /*** 80vw still works   ***/
  padding: 10px 0 !important;   /*** i would do a padding here - looks nicer ***/
}

guess this is an elegant method – and it works with all browser i guess
maybe we had to put it in media query only for desktop browsers – i had to look what happens to mobile devices.

• This reply was modified 5 years, 1 month ago by Guenni007.

This Code has no error – it is copy pasted from an enfold 4.6.2 Installation from my server and it works very well there – but because i have never sit before a PC i did not recognize that there is the jumping scrollbar issue.

The css code ( as mentioned above – without that functions.php snippet to use)
Look: Movie with your site

See example page – tested on both MAC an PC – no scroll-jump! Only different browsers show the scroll-bar – maybe this is possible too to influence.
https://webers-testseite.de/guenni/masonry/

i can not see my code in your source code at all.
Where is it:

.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader {
    opacity: 0.8;
}

.mfp-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  overflow: hidden;
}

.mfp-arrow {
  position: fixed
}

.mfp-wrap + #wrap_all {
  position: fixed
}

img.mfp-img {
  max-width: 70vw;    /*** 80vw still works   ***/
  padding: 10px 0 !important;   /*** i would do a padding here - looks nicer ***/
}