Question

我正在做一个灯箱，我希望灯箱的叠加层可以滚动，同时防止身体滚动。以下是我试图实现的效果（在所有浏览器上）：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和拼写错误。

Answer 1

这就是诀窍：

首先将叠加层包装在容器div（#container）中。

然后添加：

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

结合溢出：隐藏，在safari中工作，即ff，chrome和opera。允许叠加层可滚动，同时身体保持＆＃34;修复＆＃34;用各方面的ligthboxes。

Answer 2

我在固定叠加层（在本例中为.overlay）和内部模态框中遇到了类似的问题。在我的情况下，我无法使用上面的JS在.overlay或包装父级上使用Chrome滚动滚动。

使用event.stopPropagation()将scroll / touchmove / mousemove绑定到叠加层本身而不是包装器的工作是什么。我的猜测是它也适用于包装器。

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

2 个答案: