我一直在寻找一个“灯箱”类型的解决方案，允许这一点，但还没有找到一个(请建议，如果你知道任何)。
我试图重现的行为就像你在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，它不知道为什么它应该关注其中的任何一个。
其他回答
使用以下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/html滚动添加如下
CSS
html, body {
height: 100%;
}
.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;
}
HTML
<div class="overlay">
<div class="overlay-content"></div>
</div>
<div class="background-content">
lengthy content here
</div>
基本上，你不需要JS也能做到。
主要思想是添加html/body, height: 100%和overflow: auto。 在你的覆盖层中，你可以根据你的需要启用或禁用滚动。
希望这能有所帮助!
如果你想在ios上防止过度滚动，你可以在你的.noscroll类中添加位置固定
body.noscroll{
position:fixed;
overflow:hidden;
}
如果有人正在寻找React函数组件的解决方案，你可以把它放在模态组件中:
useEffect(() => {
document.body.style.overflowY = 'hidden';
return () =>{
document.body.style.overflowY = 'auto';
}
}, [])
不要使用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，它不知道为什么它应该关注其中的任何一个。
