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

Question

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?

Scroll to the bottom after adding? As long as you can guarantee you're not adding too much that you miss something. — Dave Newton, Oct 16 '11 at 17:30

pimvdb · Accepted Answer · 2011-10-16T20:11:16.387

3

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

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

edited Oct 16 '11 at 20:11

answered Oct 16 '11 at 17:33

pimvdb

146,912
75
297
349

Well the only problem is, the div has a set height. I am appending text. – John Doe Oct 16 '11 at 17:37
1

@Pete Allport: Sorry I was thinking wrong. You have to use `scrollHeight`: http://jsfiddle.net/fAK2L/1/. – pimvdb Oct 16 '11 at 20:11

score 1 · Answer 2 · answered Oct 16 '11 at 17:33

1

Use element.scrollIntoView for the last added element

answered Oct 16 '11 at 17:33

hungryMind

6,827
4
28
43

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

2 Answers2

Linked