我一直在寻找一个“灯箱”类型的解决方案,允许这一点,但还没有找到一个(请建议,如果你知道任何)。

我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动,就像一页在一页的顶部),但覆盖层后面的主体是固定的。

我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏),但它不阻止div是可滚动的。

如何保持主体/页面从滚动,但保持滚动在全屏容器内?


当前回答

当到达内容的顶部/底部时,CSS属性允许覆盖浏览器默认的溢出滚动行为。

只需添加以下样式叠加:

.overlay {
   overscroll-behavior: contain;
   ...
}

Codepen演示

目前工作在Chrome, Firefox和IE(caniuse)

欲了解更多详细信息,请查看谷歌开发人员文章。

其他回答

我想补充之前的答案,因为我试图这样做,一些布局打破了我切换到身体的位置:固定。为了避免这种情况,我还必须将body的高度设置为100%:

function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}

值得注意的是,有时在body标签上添加"overflow:hidden"并不能完成这项工作。在这些情况下,您还必须将属性添加到html标记中。

html, body {
    overflow: hidden;
}

不要使用overflow: hidden;在身体。它会自动将所有内容滚动到顶部。也不需要JavaScript。利用溢出:auto;。这个解决方案甚至适用于移动Safari:

HTML结构

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

样式

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

在这里可以看到演示和源代码。

更新:

对于想要键盘空格键的人,page up/down工作:你需要专注于覆盖,例如,点击它,或手动JS聚焦在它之前,这部分div将响应键盘。当覆盖层被“关闭”时也是一样,因为它只是将覆盖层移动到一边。否则对浏览器来说,这只是两个正常的div,它不知道为什么它应该关注其中的任何一个。

一般来说,如果你想让父对象(在本例中是body)在子对象(在本例中是overlay)滚动时阻止它滚动,那么让子对象成为父对象的兄弟对象,以防止滚动事件冒泡到父对象。在父元素是body的情况下,这需要一个额外的包装元素:

<div id="content">
</div>
<div id="overlay">
</div>

使用浏览器的主滚动条滚动特定DIV内容以查看其工作情况。

如果你想在ios上防止过度滚动,你可以在你的.noscroll类中添加位置固定

body.noscroll{
    position:fixed;
    overflow:hidden;
}