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

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

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

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

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

当前回答

大多数解决方案都存在无法保留滚动位置的问题，所以我研究了Facebook是如何做到这一点的。除了将底层内容设置为position: fixed之外，他们还动态设置顶部以保留滚动位置:

scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';

然后，当你再次移除覆盖时，你需要重置滚动位置:

window.scrollTo(0, scrollPosition);

我创建了一个小示例来演示这个解决方案

其他回答

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

html, body {
    overflow: hidden;
}

CSS

.noScroll {
    overflow: hidden;
}

Javascript

<script>
    function toggleNav() {
        document.body.classList.toggle("noScroll");
    }
</script>

按钮

<button onclick="toggleNav()">
 Toggle Nav
</button>

如果意图是禁用移动/触摸设备，那么最直接的方法是使用touch-action: none;。

例子:

(该示例在Stack Overflow上下文中不起作用。您需要在一个独立的页面中重新创建它。)

如果你想禁用#app容器的滚动，只需添加touch-action: none;。

你可以用一些“新”css和JQuery轻松做到这一点。

初始:body{…溢出:汽车;} 使用JQuery，你可以在“overlay”和“body”之间动态切换。当使用“body”时，使用

body {
   position: static;
   overflow: auto;
}

在“叠加”时使用

body {
   position: sticky;
   overflow: hidden;
}

JQuery for switch('body'->'overlay'):

$("body").css({"position": "sticky", "overflow": "hidden"});

JQuery for switch('overlay'->'body'):

$("body").css({"position": "static", "overflow": "auto"});

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

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

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

推荐文章