我一直在寻找一个“灯箱”类型的解决方案，允许这一点，但还没有找到一个(请建议，如果你知道任何)。
我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动，就像一页在一页的顶部)，但覆盖层后面的主体是固定的。
我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏)，但它不阻止div是可滚动的。
如何保持主体/页面从滚动，但保持滚动在全屏容器内?
当前回答
值得注意的是，有时在body标签上添加"overflow:hidden"并不能完成这项工作。在这些情况下，您还必须将属性添加到html标记中。
html, body {
overflow: hidden;
}
其他回答
就我而言，这些解决方案都不适用于iPhone (iOS 11.0)。
在我的所有设备上唯一有效的修复是这个- ios-10-safari-prevent-scroll -behind-a-fixed-overlay-and-maintain-scroll-position
我想补充之前的答案，因为我试图这样做，一些布局打破了我切换到身体的位置:固定。为了避免这种情况，我还必须将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");
}
CSS
.noScroll {
overflow: hidden;
}
Javascript
<script>
function toggleNav() {
document.body.classList.toggle("noScroll");
}
</script>
按钮
<button onclick="toggleNav()">
Toggle Nav
</button>
当到达内容的顶部/底部时，CSS属性允许覆盖浏览器默认的溢出滚动行为。
只需添加以下样式叠加:
.overlay {
overscroll-behavior: contain;
...
}
Codepen演示
目前工作在Chrome, Firefox和IE(caniuse)
欲了解更多详细信息，请查看谷歌开发人员文章。
我发现这个问题试图解决我在Ipad和Iphone上的页面问题-当我显示固定div为弹出图像时，身体正在滚动。
有些答案很好，但没有一个解决了我的问题。我找到了下面这篇由Christoffer Pettersson撰写的博文。解决方案提出了帮助问题，我与iOS设备，它帮助我的滚动背景问题。
关于iOS Safari的橡皮筋滚动，我了解到了6件事
正如建议的那样，我包括博客文章的主要观点，以防链接过时。
为了禁止用户在“菜单打开”时滚动后台页面，可以通过应用一些JavaScript和CSS类来控制应该允许滚动或不允许滚动哪些元素。
基于这个Stackoverflow答案，您可以控制禁用滚动的元素不应该 当touchmove事件被触发时，执行默认的滚动操作。”
document.ontouchmove = function ( event ) {
var isTouchMoveAllowed = true, target = event.target;
while ( target !== null ) {
if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
isTouchMoveAllowed = false;
break;
}
target = target.parentNode;
}
if ( !isTouchMoveAllowed ) {
event.preventDefault();
}
};
然后把禁用滚动类放到页面div上:
<div class="page disable-scrolling">
