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

Question

I am making a web chat application and I am in need of some help. I am appending some paragraphs to a div, and I have set overflow to auto. When the content of the div containing the chat is full, it creates a scroll bar but stays at the top of the div. I would like the scroll to be fixed to the bottom so that users don't need to scroll each time they receive a message. What should I do?

Answer 1

Standard JavaScript solution

Use the scrollTop property. Checkout this demo .

The JavaScript code

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

The 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>

Here is the documentation on scrollTop and getClientRects

Answer 2

Use scrollTop and scrollHeight (not reliable across all browsers), or an inner DIV instead of the latter so you could reliably get the actual scrollable height. Don't forget to deduct the height of your container.

Answer 3

Well, this seems like a cheap hack, but you can put an empty placeholder at the bottom and jump to it using window.location

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

DEMO

Answer 4

You can scroll to the last added element using 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

Another person asked a question just like this. You can find their soultion, which worked, here:

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