Question

我正在制作一个网络聊天应用程序，我需要一些帮助。我将一些段落附加到div，并将溢出设置为auto。当包含聊天的div的内容已满时，它会创建一个滚动条，但仍保留在div的顶部。我希望将滚动条固定在底部，这样用户每次收到消息时都不需要滚动。我该怎么办？

Answer 1

Standard JavaScript solution

使用scrollTop属性。结帐demo。

JavaScript代码

 container.scrollTop = content.getClientRects()[0].height;

HTML

<div id="container">
  <div id="content">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
   </div>
 </div>

以下是有关scrollTop和getClientRects

的文档

Answer 2

使用scrollTop和scrollHeight（在所有浏览器中不可靠），或使用内部DIV而不是后者，这样您就可以可靠地获得实际的可滚动高度。不要忘记扣除容器的高度。

Answer 3

嗯，这看起来像是一个廉价的黑客，但你可以在底部放一个空占位符并使用window.location

跳转到它

$('<div>').attr('id','placeholder').appendTo('#content');
window.location.hash = '#placeholder';
$('#placeholder').remove();

DEMO

Answer 4

您可以使用jQuery滚动到最后添加的元素。 http://jsfiddle.net/94LBc/1/

$("#btn-addPara").click(function(e){
  $("#container").append('<p>New message</p>');

  $('#container').animate({
    scrollTop: $("#container").children(':last').offset().top
  }, 1000);
});

Answer 5

另一个人就这样问了一个问题。你可以在这里找到他们的灵魂：

Make the scrollbar fixed to bottom even while appending content to it

如何让我的滚动条自动修复到div的底部？

5 个答案:

Standard JavaScript solution