首页 文章

防止身体滚动,但允许灯箱覆盖

提问于
浏览
2

我'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 回答

  • 2

    这样就可以了:

    首先将叠加层包装在容器div(#container)中 .

    然后添加:

    $('#container').on('scroll touchmove mousewheel', function (event) {
            event.preventDefault();
        });
    

    结合溢出:隐藏,在safari中工作,即ff,chrome和opera . 允许叠加层可滚动,同时身体保持“固定”每个方面的ligthboxes .

  • 3

    我有一个类似的问题,固定覆盖(在这个例子中.overlay)和一个内部模态框 . 在我的情况下,我无法使用.overlay或包装父级使用上面的JS在Chrome中滚动叠加层 .

    什么工作使用 event.stopPropagation() 与scroll / touchmove / mousemove绑定到覆盖本身,而不是包装器 . 我的猜测是它也适用于包装器 .

相关问题