我正在构建一个界面来显示通过 Ajax 提供的实时记录。记录应显示在设置高度的矩形中，最新的记录应位于该矩形的底部。当新记录进来时，它们被插入到矩形的底部，旧记录向上移动。当到达的记录超过矩形的容量时，矩形应该有一个滚动条，以便可以查看旧记录。
理想情况下，只使用 CSS，但是，JavaScript/jQuery 解决方案是可以接受的。
我的第一次尝试是使用 CSS，如下所示，也位于https://jsbin.com/juyapihile/edit?html,output。请注意，我实际上并没有两个表，但只显示了两个，因此您可以看到位于第一个底部的记录，而第二个没有滚动条。
对于这次尝试，我将记录包含在table绝对定位的bottoma 中div，在相对定位的a 中等于 0 。不幸的是，这样做时，滚动条不起作用。
如何做到这一点？或者一般来说，定位元素如何具有滚动条？
<!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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句