Javascript 自动跟踪div中的滚动条

基本上，我已经创建了某种类型的Autolog，它使用下面的CSS代码有一个可滚动的DIV

.myClass {
position: relative;
padding: 39px 14px 14px;
margin-bottom: -1px;
border: 1px solid #ddd;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 200px;
overflow: auto;
}

基本上，数据是使用JQuery动态地放置在这个div中的，如下所示，JQuery是从外部源获取的

$.each(data.search, function (i, v) {
        $('.myClass').append('my content here');
});

div看起来就这么简单

<div class="myClass">

</div>

---

我希望div做的是，当内容变得溢出时，我希望侧边的滚动条自动滚动到底部，以跟随自动滚动，而不必自己手动将滚动条滚动到底部，我相信这可以通过Javascript实现，但不确定如何实现，如果有人能为我指出正确的方向，那就太好了，

在添加内容后将其添加到脚本中，它应该会起作用

$(".myClass").animate({
    scrollTop: $(".myClass").scrollHeight
}, 300);

---

检查链接

我最近做了类似的事情，在那里我有一个正在打印的“控制台”（一个div），当它溢出时，你跟踪它。这是我的“println”函数：

printLn: function(str, clss) {
    con.print(str, clss);
    $output.append('<br/>').animate({ scrollTop: $output.prop('scrollHeight') }, 1);
},

---

这将div的

scrollTop

属性设置为最大值，因此它将滚动到底部。

$.each（data.search，function（i，v）{$（'.myClass'）。append（'my content here'）。animate（{scrollTop:$（.myClass”）.scrollHeight}，300）；}）；这似乎不起作用，无论如何谢谢你的贡献。很抱歉，我甚至不明白你在这里想对我说什么，但非常感谢你花时间发表文章this@CurtisCrewe使用您案例的特定示例进行编辑

printLn: function(str, clss) {
    con.print(str, clss);
    $output.append('<br/>').animate({ scrollTop: $output.prop('scrollHeight') }, 1);
},

$.each(data.search, function (i, v) {
        $div = $('.myClass');
        $div.append('my content here').animate({ scrollTop: $div.prop('scrollHeight') }, 1);
});