How can a vertical scroll bar stay at the bottom when text is added continuously?

问题

I have a div and it has a scroll bar here is the code I've used:

<div style="width: 200px; height: 250px; overflow: scroll; overflow-x: hidden; -ms-overflow-x: hidden;" id="container"></div>

There will be more text added to the div but when the div does expand how can I have the vertical scroll bar remain at the bottom of the bar so the user can see the appended text?

回答1:

You should set the scrollTop to scrollHeight, e.g.: http://jsfiddle.net/fAK2L/1/.

var div = $('div');
div.scrollTop( div.get(0).scrollHeight );

回答2:

Use element.scrollIntoView for the last added element

来源：https://stackoverflow.com/questions/7786014/how-can-a-vertical-scroll-bar-stay-at-the-bottom-when-text-is-added-continuously