javascript 如何使灯箱滚动灯箱而不是页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15274445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make lightbox scroll the lightbox and not the page
提问by tob88
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.
我正在使用 lightbox_me jquery 插件在用户单击产品时打开灯箱。灯箱内容通常会延伸到折叠下方，此时当您向下滚动时，右侧滚动条会移动整个页面。
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.
我希望它像 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;
}
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!
我读到这可以通过对我的 CSS 进行一些更改来完成。有谁知道我如何使用显示的代码实现这一目标？谢谢！
回答by Lowkase
Add this to .lightBox:
将此添加到 .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;
回答by Shauna
If you want to let it size larger than the viewport, it's most likely because of your position: fixedline. Change it to position: absoluteand you should be good.
如果您想让它的尺寸大于视口，很可能是因为您的position: fixed线条。将其更改为position: absolute，您应该会很好。
Both fixed and absolute take the element out of the document flow, so there should be no net change in how it presents, but fixedfixes it to that specific position and forces it to not move ever.
固定和绝对都将元素从文档流中取出，因此它的呈现方式不应有任何净变化，而是fixed将其固定到特定位置并强制它永远不动。
回答by Phil Thomas
I guess a general answer would be to make the background of the lighbox (i.e. the content before lightbox; the main content wrapper) position: fixed;and adjust its topvalue 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/ leftvalues as if it was fixed.
我想一般的答案是制作灯箱的背景（即灯箱之前的内容；主要内容包装器）position: fixed;并使用 javascript 将其最高值调整为与灯箱打开时用户滚动位置相对应的负值. 除此之外，灯箱需要position: absolute;具有相同的顶部/左侧值，就好像它是固定的一样。
When the user closes the lightbox, the previous values would need to be restored.
当用户关闭灯箱时，需要恢复以前的值。
回答by Ces
Add to html a class when lightbox is opening. For example:
当灯箱打开时向 html 添加一个类。例如：
.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.
当您关闭灯箱时，您已从 html 中删除了灯箱活动类。
