javascript - 完全居中时无法滚动到顶部

Question

我目前正在尝试制作一个完全居中的弹出菜单，但由于某种原因我似乎无法一直滚动到顶部。我认为 transform 只是视觉效果，所以 #content 实际上仍处于 top: 50%。有没有办法让 div 完全以 window 为中心，同时能够看到 #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>

Answer 1

除了使用 position: absolute 居中 #content 你可以将 display: flex 应用到父元素 (#popup) 并使用 margin: auto

例子

var toggle = false;
var p = document.getElementById("popup");

document.getElementById("show").onclick = function(event) {
  p.style.display = "flex";
  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 {
  margin: auto;
}

<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>