Question

我有一个容器div，它随着站点的延迟加载而扩展，因此随着用户滚动滚动变得越来越高，直到所有内容都加载完毕。在此容器中，无论用户在何处滚动，我都希望将某些内容集中在容器div的可见部分。

例如，用户滚动到足以加载所有内容的位置，然后滚动到最后。相对于在任何时候在视口中可见的容器div数量，内容仍应位于div的中心。

我尝试过将内容设置为position: fixed;，尽管这样可以确保无论用户滚动到哪里，内容始终可见，但将内容居中仍然是一个问题。 Justify-content无效，因为它相对于容器的大小而不是视口的大小。

任何帮助将不胜感激！

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>

将内容置于div的可见部分

1 个答案: