防止滚动，但允许覆盖滚动
我一直在寻找一个“灯箱”类型的解决方案，允许这个，但还没有找到一个（请，如果你知道任何建议）。
我尝试重新创建的行为就像点击图片时在Pinterest上看到的一样。 覆盖层是可滚动的（因为整个覆盖层像页面顶部一样向上移动），但覆盖层后面的主体是固定的。
我试图用CSS创建它（即在整个页面顶部的div覆盖和具有overflow: hidden主体），但它并不妨碍div可滚动。
如何保持身体/页面不滚动，但保持在全屏容器内滚动？
理论
查看当前pinterest站点的实现（它可能会在将来发生变化），当您打开覆盖时， noscroll类将应用于body元素并overflow: hidden已设置，因此body不再可滚动。
覆盖（即时创建或者已经在页面内部并且通过display: block可见，它没有区别）具有position : fixed和overflow-y: scroll ，其top ， left ， right和bottom属性设置为0 ：这种风格使覆盖填充整个视口。
叠加层中的div只是position: static那么您看到的垂直滚动条与该元素有关。 因此内容是可滚动的，但覆盖保持不变。
当你关闭缩放时，你可以隐藏覆盖图（通过display: none ），然后你也可以通过javascript（或者只是里面的内容）完全移除它，这取决于你如何注入它。
作为最后一步，您还必须将noscroll类移除到body （以便溢出属性返回到其初始值）
码
Codepen示例
（它通过改变叠加层的aria-hidden属性来工作，以显示和隐藏它并增加其可访问性）。
标记
（打开按钮）
<button type="button" class="open-overlay">OPEN LAYER</button>
（覆盖和关闭按钮）
<section class="overlay" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-overlay">CLOSE LAYER</button>
</div>
</section>
CSS
.noscroll {
overflow: hidden;
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0; }
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }
Javascript （香草-JS）
var body = document.body,
overlay = document.querySelector('.overlay'),
overlayBtts = document.querySelectorAll('button[class$="overlay"]');
[].forEach.call(overlayBtts, function(btt) {
btt.addEventListener('click', function() {
/* Detect the button class name */
var overlayOpen = this.className === 'open-overlay';
/* Toggle the aria-hidden state on the overlay and the
no-scroll class on the body */
overlay.setAttribute('aria-hidden', !overlayOpen);
body.classList.toggle('noscroll', overlayOpen);
/* On some mobile browser when the overlay was previously
opened and scrolled, if you open it again it doesn't
reset its scrollTop property */
overlay.scrollTop = 0;
}, false);
});
最后，这里是另一个示例，其中叠加层通过应用于opacity属性的CSS transition以淡入效果打开。 此外，还会应用padding-right以避免滚动条消失时在底层文本上重排。
Codepen示例（淡入淡出）
CSS
.noscroll { overflow: hidden; }
@media (min-device-width: 1025px) {
/* not strictly necessary, just an experiment for
this specific example and couldn't be necessary
at all on some browser */
.noscroll {
padding-right: 15px;
}
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; left: 0; right: 0; bottom: 0;
}
[aria-hidden="true"] {
transition: opacity 1s, z-index 0s 1s;
width: 100vw;
z-index: -1;
opacity: 0;
}
[aria-hidden="false"] {
transition: opacity 1s;
width: 100%;
z-index: 1;
opacity: 1;
}
如果你想防止ios过度滚动，你可以添加固定到你的.noscroll类的位置
body.noscroll{
position:fixed;
overflow:hidden;
}
值得注意的是，有时在身体标签中添加“overflow：hidden”并不能完成这项工作。 在这些情况下，您也必须将该属性添加到html标记中。
html, body {
overflow: hidden;
}