如何使用 jQuery 将 div 的滚动条保持在 div 的底部？

Posted 2023-03-07

【中文标题】如何使用 jQuery 将 div 的滚动条保持在 div 的底部？

【英文标题】：How can I keep a div's scrollbar at the bottom of the div using jQuery?

【发布时间】：2010-11-26 17:42:00

【问题描述】：

我有一个名为 #output 的 div，其样式为 overflow:scroll;。使用 jQuery.ajax，它每 x 秒更新一次。我希望喜欢拥有它，这样当滚动条出现时（在 div 填满之后），它应该像大多数聊天客户端一样，一直停留在 div 的底部而不是顶部。

我确定有办法做到这一点，但我似乎找不到它。

这是Sass

#output
  :margin 0 0 10px 0
  :padding 10px
  :height 500px
  :overflow scroll
  :background #111111
  :border 1px solid #000000
  :color #8e8e8e

Haml 只是一个简单的

#output
  = @output

【参考方案1】：

$("#output").attr( scrollTop: $("#output").attr("scrollHeight") );


$("#output").animate( scrollTop: $("#output").attr("scrollHeight") , 3000);  
// animated

见

Using jQuery to Scroll to the bottom of an Element

【讨论】：

我看过那个链接，但它似乎不起作用。如果有任何不同，我编辑了问题以包含 Haml 和 Sass。