个人中心
gpt4 book ai didi

javascript - 将 CSS 滚动添加到定位元素

转载 作者：太空宇宙 更新时间：2023-11-04 01:55:18 25 4
gpt4 key购买 nike

我正在构建一个界面来显示通过 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/

25 4 0
文章推荐： c - Mergesort 中的段错误分配数组时 - c
文章推荐： C. 将 char 十进制值存储到数组无法读取/存储 8 位字符
文章推荐： node.js - 如何查看 JWT 中存储的数据？使用 auth0 和express-jwt
文章推荐： c - 驯服 glutTimerFunc
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com