我遇到了一个问题，如果我将行添加到溢出容器，顶部的一些行会被遮盖。我的实际应用程序比这复杂一点，因为它还在行内添加内容，如果您选择了“错误”选项，那么顶行将完全隐藏。
是否可以将所有行都放入容器中，以便当您一直滚动到顶部时，您始终可以看到最上面的行？目前，根据您拥有的行数，部分或整个顶行被隐藏。
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>最佳答案
从 #wrapper 中移除 align-item: center。
问题是此属性将所有子行对齐在父级 #wrapper 的中间。
因此，如果您计算行数，则只有应该出现的行数的一半。
尝试检查它，一半行在#wrapper 之上，无法查看。
您还可以对 #wrapper 进行一些填充，以便在最后一行下方添加一些颜色。
检查这个Fiddle
关于javascript - 容器内的行在顶部被遮挡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56803910/