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

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

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

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


当前回答

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

例子:

const app = document.getElementById('app'); const overlay = document.getElementById('overlay'); let body = ''; for (let index = 0; index < 500; index++) { body += index + '<br />'; } app.innerHTML = body; app.scrollTop = 200; overlay.innerHTML = body; * { margin: 0; padding: 0; } html, body { height: 100%; } #app { background: #f00; position: absolute; height: 100%; width: 100%; overflow-y: scroll; line-height: 20px; } #overlay { background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; right: 0; height: 100%; padding: 0 0 0 100px; overflow: scroll; } <div id='app'></div> <div id='overlay'></div>

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

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

其他回答

使用以下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”);

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

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

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

你可以用一些“新”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"});

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

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

要防止的行为称为滚动链接。要禁用它,请设置

overscroll-behavior: contain;

在你的CSS覆盖。