防止正文滚动但允许叠加滚动

Question

防止正文滚动但允许叠加滚动我一直在寻找一个“灯箱”类型的解决方案，允许这个但尚未找到一个（请，如果您知道任何，请建议）。我正在尝试重新创建的行为就像您在点击图片时在Pinterest上看到的那样。叠加层是可滚动的（因为整个叠加层像页面顶部的页面一样向上移动），但叠加层后面的主体是固定的。我试图用CSS创建它（即div在整个页面和主体上面叠加overflow: hidden），但它不会阻止div可滚动。如何防止正文/页面滚动但仍在全屏容器内滚动？

Answer 1

不要使用overflow: hidden;上body。它会自动将所有内容滚动到顶部。也不需要JavaScript。利用overflow: 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;}

观看演示在这里和源代码在这里。

更新：

对于想要键盘空格键，页面向上/向下工作的人：你需要专注于叠加，例如，点击它，或者在这部分div响应键盘之前手动JS聚焦它。与覆盖“关闭”时相同，因为它只是将覆盖移动到侧面。否则浏览器，这些只是两个正常的divs，它不知道为什么它应该专注于它们中的任何一个。