我一直在寻找一个“灯箱”类型的解决方案，允许这一点，但还没有找到一个(请建议，如果你知道任何)。
我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动，就像一页在一页的顶部)，但覆盖层后面的主体是固定的。
我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏)，但它不阻止div是可滚动的。
如何保持主体/页面从滚动，但保持滚动在全屏容器内?
当前回答
不要使用overflow: hidden;在身体。它会自动将所有内容滚动到顶部。也不需要JavaScript。利用溢出:auto;。这个解决方案甚至适用于移动Safari:
HTML结构
<div class="overlay">
<div class="overlay-content"></div>
</div>
<div class="background-content">
lengthy content here
</div>
样式
.overlay{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
.overlay-content {
height: 100%;
overflow: scroll;
}
}
.background-content{
height: 100%;
overflow: auto;
}
在这里可以看到演示和源代码。
更新:
对于想要键盘空格键的人，page up/down工作:你需要专注于覆盖，例如，点击它，或手动JS聚焦在它之前，这部分div将响应键盘。当覆盖层被“关闭”时也是一样，因为它只是将覆盖层移动到一边。否则对浏览器来说，这只是两个正常的div，它不知道为什么它应该关注其中的任何一个。
其他回答
body标签的简单内联样式:
<body style="position: sticky; overflow: hidden;">
试试这个
var mywindow = $('body'), navbarCollap = $('.navbar-collapse');
navbarCollap.on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
navbarCollap.on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
我发现这个问题试图解决我在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">
一般来说，如果你想让父对象(在本例中是body)在子对象(在本例中是overlay)滚动时阻止它滚动，那么让子对象成为父对象的兄弟对象，以防止滚动事件冒泡到父对象。在父元素是body的情况下，这需要一个额外的包装元素:
<div id="content">
</div>
<div id="overlay">
</div>
使用浏览器的主滚动条滚动特定DIV内容以查看其工作情况。
如果你想在ios上防止过度滚动，你可以在你的.noscroll类中添加位置固定
body.noscroll{
position:fixed;
overflow:hidden;
}
