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

【问题标题】：Preventing body scroll but allow lightbox overlay防止身体滚动但允许灯箱覆盖
【发布时间】：2015-01-13 15:13:29
【问题描述】：

我正在做一个灯箱，我希望灯箱的覆盖层可以滚动，同时防止正文滚动。这是我想要达到的效果（在所有浏览器上）：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 和拼写错误。

【问题讨论】：

标签： css google-chrome opera

【解决方案1】：

我在固定覆盖（在此示例中为 .overlay）和内部模态框时遇到了类似问题。就我而言，我无法在 .overlay 或 wrapper 父级上使用上面的 JS 在 Chrome 中滚动覆盖。

起作用的是使用event.stopPropagation() 并将滚动/触摸移动/鼠标移动绑定到覆盖层本身，而不是包装器。我的猜测是它也适用于包装器。

【讨论】：

请更正方法名称 - "stopPropagation" :)

【解决方案2】：

这成功了：

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

然后添加这个：

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

结合overflow:hidden，适用于safari，即ff、chrome和opera。允许叠加层可滚动，而主体保持“固定”，每一侧都有光盒。

【讨论】：