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

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

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

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


当前回答

我想补充之前的答案,因为我试图这样做,一些布局打破了我切换到身体的位置:固定。为了避免这种情况,我还必须将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");
}

其他回答

使用以下HTML:

<body>
  <div class="page">Page content here</div>
  <div class="overlay"></div>
</body>

然后用JavaScript拦截并停止滚动:

$(".page").on("touchmove", function(event) {
  event.preventDefault()
});

然后让事情恢复正常:

$(“.page”).off(“touchmove”);

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

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

就我而言,这些解决方案都不适用于iPhone (iOS 11.0)。

在我的所有设备上唯一有效的修复是这个- ios-10-safari-prevent-scroll -behind-a-fixed-overlay-and-maintain-scroll-position

你可以用一些“新”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标签上添加"overflow:hidden"并不能完成这项工作。在这些情况下,您还必须将属性添加到html标记中。

html, body {
    overflow: hidden;
}