如何使灯箱滚动灯箱而不是页面 [英] How to make lightbox scroll the lightbox and not the page

问题描述

当用户点击产品时，我使用lightbox_me jquery插件打开灯箱。通常灯箱内容会在折叠下方延伸，当您向下滚动时，右侧滚动条会移动整个页面。

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.

我希望它像pinterest一样工作灯箱，右侧滚动条仅滚动灯箱，页面的其余部分保持固定。我在这上面看了几篇帖子，但似乎没有什么对我有用。

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;
}

我读过这可以通过对CSS进行一些更改来完成。有谁知道如何通过显示的代码实现这一目标？谢谢！

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!

推荐答案

将此添加到.lightBox：

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*/

更新

width:100%;
overflow-x:scroll;

这篇关于如何使灯箱滚动灯箱而不是页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！