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

时间:2008-10-30 05:23:04

标签: javascript html scroll prototypejs scrollbar

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

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

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

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

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

就像一张纸条,我已经尝试过了:

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

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

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:1)

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

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

Scrolling Overflowed DIVs with JavaScript

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