I am currently struggling to create a perfectly centered popup menu that allows me to scroll all the way to the top. It seems like the transform property only affects visuals, so even though #content is set to top: 50%, I can't see everything at the top. Is there a way to keep the div centered on the window while ensuring full visibility of the content inside #content?
var toggle = false;
var p = document.getElementById("popup");
document.getElementById("show").onclick = function(event) {
p.style.display = "initial";
document.body.style.overflow = "hidden";
};
document.getElementById("hide").onclick = function(event) {
p.style.display = "none";
document.body.style.overflow = "auto";
};html, body {
margin 0;
padding 0;
width: 100%;
height: 100%;
}
#popup {
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: none;
overflow-y: scroll;
}
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div id="popup">
<div id="content">
<button id="hide">Hide</button>
<h1>Cant See</h1>
<p>Cant SeeCant SeeCant SeeCant SeeCant SeeCant SeeCant See</p>
<h1>Test</h1>
<p>test test test test test test</p>
<h1>Test</h1>
<p>test test test test test test</p>
<h1>Test</h1>
<p>test test test test test test</p>
<h1>Test</h1>
<p>test test test test test test</p>
<h1>Test</h1>
<p>test test test test test test</p>
<h1>Test</h1>
<p>test test test test test test</p>
<h1>Test</h1>
<p>test test test test test test</p>
<p>test test test test test test</p>
<h1>Test</h1>
<p>test test test test test test</p>
<p>test test test test test test</p>
<h1>Test</h1>
<p>test test test test test test</p>
</div>
</div>
<div>
<button id="show">Show</button>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
<h1>Hello World!</h1>
<p>Hello Hello Hello Hello Hello Hello</p>
</div>