Question

基本上，我已经使用下面的CSS代码创建了某种 Autolog ，它有一个可滚动的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中，如下所示，这是从外部源获取的

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

div看起来就像这个

一样简单

<div class="myClass">

</div>

我希望div做什么，就是内容变得overflow我希望侧面的滚动条自动滚动到底部以跟随 AutoLog 而不是必须手动保持自己滚动到底部，我敢肯定这可以通过 Javascript 实现，但不知道如果有人能指出我正确的方向，那将是伟大的，

Answer 1

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

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

基本上将scrollTop更新为新的scrollHeight，其中或多或少地说“滚动到滚动高度允许”，因此您“坚持”到底部。

修改

根据您的情况执行以下操作：

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

这会将div的scrollTop属性设置为最大值，因此它会滚动到底部。

Answer 2

在添加内容后将其添加到您的脚本中，它应该可以正常工作..

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

Answer 3

// Get the number of pixels scrolled
var  intElemScrollTop = element.scrollTop;
intElemScrollTop is an integer corresponding to number of pixels that element's content has been scrolled upward.

// Set the number of pixels scrolled
element.scrollTop = intValue;

检查链接https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop

自动跟踪div中的滚动条

3 个答案: