如何使燈箱滾動燈箱而不是頁面

Question

當用戶點擊產品時，我使用lightbox_me jquery插件打開燈箱。 燈箱內容通常會在折疊下方延伸，當您向下滾動時，右側滾動條會移動整個頁面。

我希望它像pinterest燈箱一樣工作，右邊的滾動條只滾動燈箱，頁面的其余部分保持固定。 我已經看過幾篇關於此的帖子，但似乎沒有什么對我有用。

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將其fixed到該特定位置並迫使它永遠不會移動。

Answer 3

我想一般的答案是制作lighbox的背景（即lightbox之前的內容;主要的內容包裝器） position: fixed; 並使用javascript將其最高值調整為與燈箱打開時刻用戶滾動位置對應的負值。 除此之外，燈箱需要是position: absolute; 具有相同的頂部 / 左側值，就好像它是固定的一樣。

當用戶關閉燈箱時，需要恢復以前的值。

Answer 4

在燈箱打開時添加到html類。 例如：

.lightbox-active{overflow:hidden}

此外，您的燈箱應具有下一個樣式：

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

關閉燈箱時，您已從html中刪除燈箱活動類。