javascript - 在 div 的可见部分居中内容

Question

我有一个容器 div，它随着网站延迟加载而扩展，因此随着用户滚动而变得越来越高，直到加载所有内容。在这个容器中，我有一些内容希望在容器 div 的可见部分居中，而不管用户滚动到哪里。

例如，用户已经滚动到足以加载所有内容，并且滚动一直向上。相对于容器 div 在任何时候在视口(viewport)中可见的部分，内容仍应位于 div 的中心。

我尝试过将内容设置为 position: fixed; 虽然这可以确保内容在用户滚动的任何地方始终可见，但让内容居中仍然是一个问题。 Justify-content 也不起作用，因为它是相对于容器的大小，而不是视口(viewport)。

如有任何帮助，我们将不胜感激!

Answer 1

我不确定您要问什么，但我为您准备了一个演示。如果您想做其他事情，请检查它并提供更多信息

    .wrapper {
      width: 300px;
      height: 300px;
      background: red;
      position: relative;
    }
    
    .scrollable-area {
      height: 100%;
      overflow: auto;
    }
    
    .centered-element {
      width: 100px;
      height: 100px;
      background: #000;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    
    .row {
      height: 100px;
      background: blue;
      margin-top: 10px;
    }

<div class="wrapper">
      <div class="centered-element"></div>
      <div class="scrollable-area">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
      </div>
    </div>