使用<position：absolute'将<div>固定到纯Javascript的视口中间

Question

由于其他应用程序设计的限制，我想使用纯JavaScript将<div>固定在屏幕中间，而不使用position: fixed。

---

尝试修复的问题包括：

JS ：

window.addEventListener('scroll', () => {
  document.getElementById('hide-side').style.top='-'+((document.body.scrollTop)*-10)+"%";
}

HTML ：

<div className="side">
  <div id="side" >some container</div>
  <div></div>
</div>

CSS ：

 #side {
   position: absolute;
   right: 100%;
   background-color: rgb(255, 0, 0);
   display: inline-block;
   opacity: 1;
 }`

Answer 1

您必须计算滚动位置并将其绝对定位。

在生产中很难做到这一点，因为您必须考虑视口缩放以及其他因素，例如当您的“模态”未直接附着到主体时，您将不得不计算其偏移量文档并据此放置。

document.body.onscroll=function(e){
  modal.style.top = `${window.scrollY}px`;
}

body{
  height: 2000px;
  background: url(https://www.designyourway.net/blog/wp-content/uploads/2018/06/Seamless-Space-Pattern-by-J.jpg);
}

#modal{
  position:absolute;
  top: 0px;
  border: 1px solid black;
  background: yellow;
}

<div id="modal">
  Modal
</div>

Answer 2

我知道您已经要求使用javascript解决方案，但我只是想提醒您注意，我认为您想要实现的目标可以使用纯HTML，css完成。

我创建了这个小提琴：https://jsfiddle.net/f0b5myzr/5/，其中此行：

transform: translate(-50%, -50%);

为您完成所有艰苦的工作。

希望这会有所帮助。

Answer 3

纯JS：

window.addEventListener("onresize", me);

me();

function me() {
    const div = document.getElementById("center");
    div.style.left = (window.innerWidth - div.offsetWidth) / 2 + "px";
    div.style.top = (window.innerHeight - div.offsetHeight) / 2 + "px";
}

#center {
position:fixed;
}

<div id="center">center</div>

<div id="middle"></div>