javascript - 将滚动页面上的 div 居中

Question

我有以下代码:

<div id="overlay" style="
    display: none;
    border: solid #aa0 10px;
    width: 75vh;
    height: 80vh;
    z-index: 650;
    position: absolute;
    left:50%; top: 50%;
    transform: translate(-50%, -50%)"
>

它一开始是隐藏的，但如果我点击特定的屏幕元素，我有一些 jquery 代码用 show() 显示它。

如果页面未滚动，这将完美居中，但是，如果当用户单击其中一个屏幕元素时页面滚动，叠加层将显示为居中，就好像页面未滚动一样。 (即，即使不在 View 中，它也会位于页面顶部的中央)。

如何解决这个问题，无论页面滚动到哪里，它都位于视口(viewport)中心？

Answer 1

您需要将位置从absolute 更改为fixed

<div id="overlay" style="
    display: none;
    border: solid #aa0 10px;
    width: 75vh;
    height: 80vh;
    z-index: 650;
    position: fixed;
    left:50%; top: 50%;
    transform: translate(-50%, -50%)"
>