使可滚动元素停留“;在底部“;同时添加内容

Make a scrollable element stay "at the bottom" while adding content

本文关键字：添加 底部 元素 停留 滚动      更新时间：2023-09-26

我正在为我正在开发的web应用程序构建一个实用程序页面。我有一个元素，我想用作某种"控制台"。

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

我遇到的问题是，当我在"控制台"的底部插入新行时，滚动条会停留在初始位置（所以除非我手动向下滚动，否则我总是看到最上面的行）。

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

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

注意，我已经试过了：

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

它几乎工作，只是它总是"落后一步"，我看不到最新的项目。

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

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

Stack Overflow帮我解决了这个问题！希望它也能帮助你！

使用JavaScript 滚动溢出DIV

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

相关文章：