在添加内容时，使可滚动元素保持“在底部”

Question

我正在为我正在处理的网络应用构建一个实用程序页面。我有一个元素，我想用作各种“控制台”。

我通过Ajax调用获取控制台的条目（使用原型的Ajax.PeriodicalUpdater）。

我遇到的问题是，当我在“控制台”的底部插入新行时，滚动条保持在初始位置（所以我总是看到顶行，除非我手动向下滚动）。

如何让滚动条自动停留在底部？

我正在为这个项目中需要它的一些库使用原型，所以如果可能的话，我宁愿坚持使用它或常规的javascript。

就像一张纸条，我已经尝试过了：

onComplete: function() { 
    $('console').scrollTop = $('console').scrollHeight;
}

它几乎有效，除了它总是“落后一步”，我看不到最新的项目。

Answer 1

new Ajax.PeriodicalUpdater(container, url, {
    onComplete: function() {
        (function() {
            container.scrollTop = container.scrollHeight;
        }).defer();
    }
});

Answer 2

嘿，我正在构建几乎完全相同的东西（一个Ajax控制台），并且我的溢出div没有一直到底的问题。

Stack Overflow帮我解决了！希望它也能帮到你！

Scrolling Overflowed DIVs with JavaScript

编辑：我的问题使用了jQuery，但问题不在于JS框架，而在于你正在使用的CSS属性。基本上你需要得到Math.max（div.scrollHeight，div.clientHeight），因为有些浏览器对这些属性有点麻烦。