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

Posted 2023-05-08

【中文标题】在添加内容时使可滚动元素保持在“底部”

【英文标题】：Make a scrollable element stay "at the bottom" while adding content

【发布时间】：2010-09-19 22:41:12

【问题描述】：

我正在为我正在开发的 Web 应用程序构建实用程序页面。我有一个元素想用作各种“控制台”。

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

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

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

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

作为说明，我已经尝试过这个：

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

它几乎有效，只是它总是“落后一步”，而且我看不到最近的项目。

【参考方案1】：

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

【讨论】：

谢谢，这个方法我其实已经试过了，但总是落后一步。换句话说，我仍然看不到最近添加的内容，直到添加下一个内容。

无论出于何种原因，onComplete 根本无法以这种方式工作。但是，这种新方法适用于 onSuccess。谢谢！

这很古怪。我真的希望对浏览器的时间有更多的控制。

是的，function.defer 真的很方便。

@eyelidlessness: (pedantry) scrollTop 是内容顶部到容器顶部的距离。 scrollHeight 实际上是显示完整内容所必需的 clientHeight。如果浏览器按字面意思理解您的代码，它会将整个内容滚动到视图之外。

【参考方案2】：

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

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

Scrolling Overflowed DIVs with JavaScript

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

【讨论】：

还是和以前一样的问题。可能是因为我使用的是原型而不是 jQuery。

@the 编辑：实际上，事情执行得太快了，这就是 defer 修复它的原因。添加 defer 后，常规 css 属性在 IE7、FF3 和 Chrome 中运行良好。