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将其固定到该特定位置并强制它永远不会移动。

Answer 3

我想一般的答案是制作lighbox的背景（即lightbox之前的内容;主要的内容包装器）position: fixed;并使用javascript将其 top 值调整为a在灯箱打开时刻对应于用户滚动位置的负值。除此之外，灯箱需要position: absolute;具有相同的顶部 / 左值，就好像它已修复一样。

当用户关闭灯箱时，需要恢复之前的值。

Answer 4

在灯箱打开时向html添加一个类。例如：

.lightbox-active{overflow:hidden}

此外，您的灯箱应该具有下一个样式：

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

当您关闭灯箱时，您已从html中删除灯箱活动类。

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

4 个答案: