我正在构建一个界面来显示通过 Ajax 提供的实时记录。记录应显示在设置高度的矩形中，最新的记录应位于该矩形的底部。当新记录进来时，它们被插入到矩形的底部，旧记录向上移动。当到达的记录多于矩形可以容纳的记录时，矩形应该有一个滚动条，以便可以查看旧记录。
理想情况下，只使用 CSS，但是，JavaScript/jQuery 解决方案也是可以接受的。
我的第一次尝试是使用 CSS，如下所示，也位于 https://jsbin.com/juyapihile/edit?html,output。 .请注意，我实际上并没有两个表，而是只显示了两个，因此您可以看到第一个位于底部的记录，第二个没有滚动条。
对于这次尝试，我将记录包含在 table 中，该表绝对定位，bottom 等于 0，位于 div 中相对的。不幸的是，这样做时，滚动条不起作用。
如何做到这一点？或者一般来说，定位元素怎么会有滚动条？
<!DOCTYPE html>
<html>
<head>
<title>Client Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.table-container {
height:100px;
overflow-y: scroll;
position: relative;
border: 1px solid black;
padding: 5px;
margin-bottom: 20px;
}
#at-bottom {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<p>This keeps the newest record at the bottom</p>
<div class="table-container">
<table id="at-bottom">
<thead><tr><td>hello</td><td></td></tr></thead>
<tbody></tbody>
</table>
</div>
<p>This uses a scroll bar</p>
<div class="table-container">
<table id="with-scroll">
<thead><tr><td>hello</td><td></td></tr></thead>
<tbody></tbody>
</table>
</div>
<p>How do I do both???</p>
<script type="text/javascript">
$(function(){
var count=0;
setInterval(function(){
console.log('x')
count++;
$("#at-bottom thead tr").clone().appendTo($('#at-bottom tbody')).find('td').eq(1).text(count);
$("#with-scroll thead tr").clone().appendTo($('#with-scroll tbody')).find('td').eq(1).text(count);
}, 2000);
});
</script>
</body>
</html>
最佳答案
我再次阅读了您的帖子，但不确定当文本比 div 的高度短时，您是否需要将文本放在 div 的底部。如果您希望文本从顶部填充 div 然后获得滚动条并将最后一个文本保留在底部，我的另一个答案有效。如果你想一直将文本保留在底部，那么我会使用如下的 flexbox 解决方案:
var wrap = document.getElementById('wrap');
var body = document.getElementById('body');
var count = 0;
setInterval(function() {
var row = document.createElement("tr");
var data = document.createElement("td");
var text = document.createTextNode("Hello " + count);
count+=1;
data.appendChild(text);
row.appendChild(data);
body.appendChild(row);
wrap.scrollTop = wrap.scrollHeight - wrap.clientHeight;
}, 1000);.table-container {
display:flex;
flex-direction:column;
height:75px;
width:300px;
border: 1px solid black;
padding: 5px;
margin-bottom: 10px;
justify-content:flex-end;
}
.table-container div {
overflow-y: auto;
min-height: 0px;
} <div class="table-container">
<div id="wrap">
<table>
<tbody id="body">
</tbody>
</table>
</div>
</div>关于javascript - 将 CSS 滚动添加到定位元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42763993/