Question

我遇到了一个问题，如果我将行添加到溢出容器中，则顶部的某些行会被遮盖。我的实际应用程序比这要复杂一些，因为它还会在行内添加内容，如果您选择“错误”选项，则第一行将被完全隐藏。

是否可以将容器中的所有行都放进去，以便当您一直滚动到顶部时，始终可以看到最顶部的行？当前，根据隐藏的行数，隐藏第一行的一部分或全部。

JsFiddle link。

还要在此处编码：

window.onload = function() {
  let addBtn = document.getElementById("addRow");
  addBtn.addEventListener('click', function() {
    let wrapper = document.getElementById("wrapper");
    let newRow = "<div class='row'></div>"
    wrapper.innerHTML += newRow;
  })
};

body {
  display: flex;
  justify-content: center;
}

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40vh;
  width: 1000px;
  background-color: yellow;
  overflow-y: auto;
}

.row {
  display: block;
  background-color: aliceblue;
  min-height: 50px;
  margin-top: 10px;
  width: 80%;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Title of the document</title>
  </head>

  <body>

    <div id="wrapper">

      <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>
      <button id="addRow">Add</button>
    </div>

  </body>

</html>

Answer 1

从align-item: center中删除#wrapper。

问题在于此属性将所有子行与父行#wrapper对齐。

因此，如果您计算行数，那么应该显示的只是行的一半。

尝试检查它，一半行在#wrapper上方，无法查看。

您还可以在#wrapper上添加一些填充，以使最后一行下方具有一些颜色。

选中此Fiddle

Answer 2

使用解决方案更新了小提琴-https://jsfiddle.net/zL61c84x/

#wrapper {

  height: 40vh;
  width: 1000px;
  background-color: yellow;
  overflow-y: auto;
}

#wrapperInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

容器内部的行在顶部被遮盖

2 个答案: