如何让lightbox滚动lightbox而不是页面

Question

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

我希望它能像pinterest lightbox一样工作，右边的滚动条只滚动lightbox，页面的其余部分保持固定。我已经看过一些关于这个的帖子，但似乎没有一个对我有效。

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进行一些更改来完成。有没有人知道我如何使用所显示的代码来实现这一点？谢谢!

Answer 1

将此代码添加到.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;

Answer 2

如果您想让它的大小大于视口，这很可能是因为您的position: fixed行。将其更改为position: absolute，您应该就很好了。

固定的和绝对的都将元素从文档流中删除，所以它的呈现方式不应该有任何净变化，但是fixed将它固定到那个特定的位置，并强制它永远不移动。

Answer 3

我猜一般的答案是使lightbox的背景(即lightbox之前的内容；主要内容包装) position: fixed;，并使用javascript将其顶部值调整为负值，该负值对应于打开lightbox时用户滚动的位置。除此之外，灯箱需要使用相同的顶部/左值进行position: absolute;，就好像它是固定的一样。

当用户关闭lightbox时，需要恢复以前的值。