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

Question

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

我一直在寻找一个“灯箱”类型的解决方案，允许这个但尚未找到一个（请，如果您知道任何，请建议）。

我正在尝试重新创建的行为就像您在点击图片时在Pinterest上看到的那样。叠加层是可滚动的（因为整个叠加层像页面顶部的页面一样向上移动），但叠加层后面的主体是固定的。

我试图用CSS创建它（即div在整个页面和主体上面叠加overflow: hidden），但它不会阻止div可滚动。

如何防止正文/页面滚动但仍在全屏容器内滚动？

Answer 1

不要使用overflow: hidden;上body。它会自动将所有内容滚动到顶部。也不需要JavaScript。利用overflow: auto;。此解决方案甚至适用于移动Safari：HTML结构<div&nbsp;class="overlay"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="overlay-content"></div></div><div&nbsp;class="background-content"> &nbsp;&nbsp;&nbsp;&nbsp;lengthy&nbsp;content&nbsp;here</div>造型.overlay{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;fixed; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0px; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0px; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;0px; &nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0px; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;rgba(0,&nbsp;0,&nbsp;0,&nbsp;0.8); &nbsp;&nbsp;&nbsp;&nbsp;.overlay-content&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;scroll; &nbsp;&nbsp;&nbsp;&nbsp;}}.background-content{ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;auto;}观看演示在这里和源代码在这里。更新：对于想要键盘空格键，页面向上/向下工作的人：你需要专注于叠加，例如，点击它，或者在这部分div响应键盘之前手动JS聚焦它。与覆盖“关闭”时相同，因为它只是将覆盖移动到侧面。否则浏览器，这些只是两个正常的divs，它不知道为什么它应该专注于它们中的任何一个。