Javascript 添加CSS滚动到定位元素_Javascript_Jquery_Html_Css

Javascript 添加CSS滚动到定位元素

javascript jquery html css

Javascript 添加CSS滚动到定位元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在构建一个界面来显示通过Ajax提供的实时记录。记录应显示在一个设置高度的矩形中，最新记录应位于该矩形的底部。当新记录进入时，它们被插入到矩形的底部，旧记录向上移动。当到达的记录超过矩形中所能容纳的数量时，矩形应具有滚动条，以便可以查看旧记录理想情况下，只使用CSS，但是可以接受JavaScript/jQuery解决方案我的第一次尝试是使用CSS，如下所示，也位于。请注意，我实际上没有两个表，但只显示了两个，这样您就可以看到第一个表底部的记录，第二个表上没有滚动条对于这次尝试，我将记录

我正在构建一个界面来显示通过Ajax提供的实时记录。记录应显示在一个设置高度的矩形中，最新记录应位于该矩形的底部。当新记录进入时，它们被插入到矩形的底部，旧记录向上移动。当到达的记录超过矩形中所能容纳的数量时，矩形应具有滚动条，以便可以查看旧记录

理想情况下，只使用CSS，但是可以接受JavaScript/jQuery解决方案

我的第一次尝试是使用CSS，如下所示，也位于。请注意，我实际上没有两个表，但只显示了两个，这样您就可以看到第一个表底部的记录，第二个表上没有滚动条

对于这次尝试，我将记录包括在一个

表中，该表位于绝对位置，而底部等于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>


客户端测试
.桌上容器{
高度：100px；
溢出y：滚动；
位置：相对位置；
边框：1px纯黑；
填充物：5px；
边缘底部：20px；
}
#在底部{
位置：绝对位置；
底部：0；
}
这将在底部保留最新记录
你好
这使用一个滚动条
你好
我如何做到两者
$（函数（）{
var计数=0；
setInterval（函数（）{
console.log（'x'）
计数++；
$（“#在底部）和tr”）.clone（）.appendTo（$（“#在底部tbody'））.find（'td'）.eq（1）.text（count）；
$（“#带滚动条tr”）.clone（）.appendTo（$（“#带滚动条tbody”））.find（'td'）.eq（1）.text（count）；
}, 2000);
});
删除：位置：绝对：
var div = document.getElementById('divID');
div.scrollTop = div.scrollHeight - div.clientHeight;


.table容器{
高度：200px；
溢出y：滚动；
位置：相对位置；
边框：1px纯黑；
填充物：5px；
边缘底部：20px；
}
.表格容器表格{
底部：0；
}

你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
删除：位置：绝对：
var div = document.getElementById('divID');
div.scrollTop = div.scrollHeight - div.clientHeight;


.table容器{
高度：200px；
溢出y：滚动；
位置：相对位置；
边框：1px纯黑；
填充物：5px；
边缘底部：20px；
}
.表格容器表格{
底部：0；
}

你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
另一个答案是一个良好的开端。您必须删除“位置：绝对”。然后，向每个div添加一个id，并在向表中添加元素时设置如下“scrollTop”属性：
var div = document.getElementById('divID');
div.scrollTop = div.scrollHeight - div.clientHeight;

这就是它的工作原理：

var div=document.getElementById（'divID'）；
div.scrollTop=div.scrollHeight-div.clientHeight
.table容器{
高度：75px；
溢出y：自动；
位置：相对位置；
边框：1px纯黑；
填充物：5px；
边缘底部：10px；
}

你好
你好，最后一位
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好，最后一位
另一个答案是一个良好的开端。您必须删除“位置：绝对”。然后，向每个div添加一个id，并在向表中添加元素时设置如下“scrollTop”属性：
var div = document.getElementById('divID');
div.scrollTop = div.scrollHeight - div.clientHeight;

这就是它的工作原理：

var div=document.getElementById（'divID'）；
div.scrollTop=div.scrollHeight-div.clientHeight
.table容器{
高度：75px；
溢出y：自动；
位置：相对位置；
边框：1px纯黑；
填充物：5px；
边缘底部：10px；
}

你好
你好，最后一位
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好