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