2
我试图但我没有想出解决这个相当简单的问题。滚动只有一个div的内容与主滚动条
基本上我想要的是拥有一个固定的主体，以垂直和水平居中的矩形div来托管我的内容。身体不会滚动，但div的内容应该。
换句话说，我要做的是基本上有一个完整的页面，底层的整个背景（比如一个全宽图像）和一个在这个背景层之上托管我的内容的div，独立滚动。
我在我的代码是什么基本上三个嵌套的层：
1）的主体（溢出：隐藏），2）全宽透明容器（溢出-γ：滚动）和3）为中心的div这应该是我的所有内容（位置：绝对）。
问题是，什么都不滚动。如果我尝试将overflow-y：scroll或auto添加到居中的div，那么会出现一个丑陋的滚动条，而这不是我想要的 - 我想使用“main”滚动条进行滚动。
html, body {
margin: 0;
background-color: lightgray;
overflow: hidden;
}
.container {
overflow-y: scroll;
width: 100%;
height: 100vh;
background-color: red;
}
.overlay {
position: absolute;
width: 90%;
height: 90vh;
background-color: lightgrey;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
z-index: 10;
}<section class="container">
<div class="overlay">
<h1>Lorem Ipsum </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
</p>
</div>
</section>这里有一个小提琴在这里你可以看到我要去为：
https://jsfiddle.net/ohmlg/29mL6tnv/
我想要什么：
1）具有div的内容在滚动时留在div内（现在，溢出：身体上的隐藏属性切断了部分th e内容） 2）使用主滚动条滚动div内的内容
我不能实现一个解决方法，比如有四个厚的div，右上角和左下角（基本上在中间留下一个矩形的“窗口”）， ，因为我想要两个背景：一个在底层（body或.container），另一个在“content div”上。
_“我想用‘主’身体滚动条滚动” _ - 那么你应该认识到，设置溢出：隐藏的身体是适得其反在关... – CBroe
我不相信这是可以实现的。它可能是内容突破了'overlay' div，并且您在页面上有滚动条，或者您需要在'overlay' div的右侧有一个滚动条。 –
@CBroe，不幸的是，这并没有解决我的问题。 – mrb93