我'm doing a lightbox and I want the overlay of the lightbox to be scrollable while preventing the body to scroll. Here is the effect I' m试图实现(在所有浏览器上):http://jsfiddle.net/10py25fh/3/
到目前为止,这是我的代码的相关部分 .
HTML:
<body class="noScroll">
<div class="overlay">
<div class="lightbox">
/*** Lightbox content ***/
</div>
</div>
/*** Lots of other content ***/
</body>
CSS:
.noScroll {
overflow: hidden;
}
.overlay{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
z-index: 98;
overflow: auto;
}
.lightbox {
z-index: 99;
position: relative;
}
这适用于IE和FF,但不适用于Chrome和Opera . 我注意到,如果灯箱高度大于窗户,它可以在任何地方找到它 . 但是如果灯箱高度小于窗口,则身体会继续在Chrome和Opera上滚动,但仍然可以在IE和FF上工作(不滚动) .
编辑:错误的jsfiddle和拼写错误 .
2 回答
这样就可以了:
首先将叠加层包装在容器div(#container)中 .
然后添加:
结合溢出:隐藏,在safari中工作,即ff,chrome和opera . 允许叠加层可滚动,同时身体保持“固定”每个方面的ligthboxes .
我有一个类似的问题,固定覆盖(在这个例子中.overlay)和一个内部模态框 . 在我的情况下,我无法使用.overlay或包装父级使用上面的JS在Chrome中滚动叠加层 .
什么工作使用
event.stopPropagation()
与scroll / touchmove / mousemove绑定到覆盖本身,而不是包装器 . 我的猜测是它也适用于包装器 .