我一直在寻找一个“灯箱”类型的解决方案，允许这一点，但还没有找到一个(请建议，如果你知道任何)。
我试图重现的行为就像你在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;。
其他回答
我想补充之前的答案，因为我试图这样做，一些布局打破了我切换到身体的位置:固定。为了避免这种情况，我还必须将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");
}
就我而言，这些解决方案都不适用于iPhone (iOS 11.0)。
在我的所有设备上唯一有效的修复是这个- ios-10-safari-prevent-scroll -behind-a-fixed-overlay-and-maintain-scroll-position
值得注意的是，有时在body标签上添加"overflow:hidden"并不能完成这项工作。在这些情况下，您还必须将属性添加到html标记中。
html, body {
overflow: hidden;
}
当到达内容的顶部/底部时，CSS属性允许覆盖浏览器默认的溢出滚动行为。
只需添加以下样式叠加:
.overlay {
overscroll-behavior: contain;
...
}
Codepen演示
目前工作在Chrome, Firefox和IE(caniuse)
欲了解更多详细信息，请查看谷歌开发人员文章。
你可以用一些“新”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"});
