如何使以下绝对定位的模式始终出现在中心（无论用户在何处滚动）？

Question

我不能使用固定位置，因为我的应用程序应该嵌入网站中（目前，大小为800px x 800px）。因此，我正在使用position: absolute。但是，如果用户滚动到底部太多，则如果该模式出现在应用程序的顶部，他将看不到该模式。

所以，我这样做了：

// vreditor-sdk is the outermost container
const currentScrollTop = document.querySelector('.vreditor-sdk').scrollTop
this.emement.style.top: currentScrollTop

这使得模式显示如下（无论用户在何处滚动）：

但是无论用户在何处滚动，如何使模式显示在800px x 800px容器的中间？

Answer 1

使用position: fixed;，则无需使用javascript进行定位。

.vreditor-sdk {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.content {
  height: 5000px;
}
.vreditor-sdk {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  background: grey;
  padding: 20px;
}

<div class="content">
<div class="vreditor-sdk">
 pop up
</div>
</div>

Answer 2

您可以这样使用。

html {
    position: absolute;
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow: auto;
}

.vreditor-sdk {
    position: absolute;
    color:#fff;
    background:#ff0000;
    padding:10px;
    left:50%;
    transform:translate(-50%,0);
}

<div>
  <div class="vreditor-sdk">
  Fixed with absolute
  </div>
  <p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus nunc, hendrerit vel suscipit sit amet, volutpat at purus. Fusce eu mauris pretium, sodales erat sed, fringilla purus. Donec pellentesque diam urna, varius malesuada libero ornare eu. Phasellus finibus tempor fringilla. Aenean eros est, porta vitae massa at, vulputate pulvinar libero. Nullam iaculis rutrum vulputate. Ut suscipit purus sed lorem aliquam, vitae commodo sem ornare. Quisque tristique, elit quis rutrum varius, ipsum metus blandit dui, vitae consectetur enim neque eu metus. Sed efficitur at quam eu congue. Nunc mattis massa sit amet tincidunt luctus. Nulla luctus eros ac ligula sagittis varius. Vestibulum sed tellus at felis molestie vulputate.

Cras porttitor lorem eu felis efficitur varius. Nam rhoncus scelerisque turpis a malesuada. Sed finibus lobortis felis ut ultrices. Phasellus in dui sed mi pretium varius. Suspendisse sit amet elit cursus, sodales dui ac, sodales nunc. Maecenas ac enim interdum massa fringilla laoreet. Mauris urna leo, suscipit vitae diam in, porttitor consequat magna. Nam euismod feugiat nibh. Pellentesque ut pharetra ante, vitae semper justo. Vestibulum ac ipsum nec lorem efficitur rhoncus non nec turpis. Proin quis velit faucibus, imperdiet eros eu, bibendum nunc. Proin elementum et ipsum a tempus. Pellentesque nec tellus bibendum eros mattis egestas et ac lorem. Quisque turpis nunc, lacinia dignissim sapien id, hendrerit facilisis massa.

Nam ut commodo leo, sit amet efficitur ante. Duis bibendum pretium aliquam. Morbi rhoncus pellentesque odio, non molestie sapien luctus quis. Donec id libero arcu. Vivamus ac dignissim ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio lorem, sollicitudin ac arcu et, lacinia auctor leo. Nullam laoreet blandit mauris, non pellentesque ipsum consectetur non.

Donec efficitur risus quis justo dignissim malesuada. Sed quis rhoncus ex, vel luctus diam. Nullam finibus, orci at ultricies bibendum, lectus quam tempus est, at vulputate quam enim eget odio. Donec elit est, luctus eget tellus ac, venenatis convallis lorem. Quisque placerat metus a sem consectetur suscipit. Suspendisse auctor mollis velit non semper. Nam metus urna, tempus vitae enim eu, bibendum fringilla augue. Fusce luctus neque eu vehicula finibus. Proin ultricies orci eu lorem pharetra dapibus. Vestibulum sollicitudin erat quis ante ultricies pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc feugiat ex sapien, non malesuada nisi porttitor ut. Nam tempus, eros in pharetra pulvinar, augue tellus feugiat lorem, id tincidunt mauris lacus nec eros. Cras in mattis nisl, nec consequat ligula. Mauris arcu odio, tristique vel eleifend a, fermentum non nisl. Nullam volutpat sed felis id tincidunt. Donec tempor dui in urna aliquam viverra. Aenean eget egestas nibh. Sed vestibulum aliquet eros quis tincidunt. 
  </p>
</div>