如何使灯箱滚动灯箱而不是页面

Question

I am using the lightbox_me jquery plugin to open a lightbox when a user clicks on a product. Often the lightbox content stretches below the fold, and at the moment the right scrollbar moves the entire page when you scroll down.

I'd like it to work like the pinterest lightbox, whereby the right scrollbar only scrolls the lightbox, and the rest of the page stays fixed. I've seen a few posts on this, but nothing seems to work for me.

jQuery(function(){


$('.productBoxLink').click(function(e) {
    var box = $(this).siblings(".productLightboxContent").html();
    $('.lightBox').lightbox_me({
        centered: false,
        modalCSS:  {top: '50px'},
        onLoad: function() { 
              $('.productLightbox').html(box);
              $('.productUpdateInner').show();
            },
        onClose: function() {
              $('.productUpdateInner').hide();
            }
        });
    return false;
  });
});


.lightBox {
width: 450px;
background-color: #fff;
top: 400px;
position: fixed;
padding: 30px;
text-align: center;
display: none;
clear: both;
-moz-box-shadow: 0 0 5px #5C5C5C;
-webkit-box-shadow: 0 0 5px #5C5C5C;
box-shadow: 0 0 5px #5C5C5C;
border-radius: 5px;
}

I've read that this can be done with a few changes to my CSS. Does anyone know how I can achieve this with the code shown? Thanks!

Answer 1

Add this to .lightBox:

height:600px; /* You need to set a specific height - px or %*/
overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/

Update

width:100%;
overflow-x:scroll;

Answer 2

If you want to let it size larger than the viewport, it's most likely because of your position: fixed line. Change it to position: absolute and you should be good.

Both fixed and absolute take the element out of the document flow, so there should be no net change in how it presents, but fixed fixes it to that specific position and forces it to not move ever.

Answer 3

I guess a general answer would be to make the background of the lighbox (ie the content before lightbox; the main content wrapper) position: fixed; and adjust its top value with javascript to a negative value corresponding to the position of user scroll in the moment of lightbox opening. Besides that, the lightbox would need to be position: absolute; with the same top / left values as if it was fixed.

When the user closes the lightbox, the previous values would need to be restored.

Answer 4

Add to html a class when lightbox is opening. For example:

.lightbox-active{overflow:hidden}

Also, your lightbox should have the next style:

.lightbox{overflow-x:hidden;overflow-y:scroll}

When you close the lightbox, you have remove the lightbox-active class from html.