I am writing a log "tail -f" application using jQuery on the client side. Currently, the application works by making AJAX requests to the server every 2 seconds and appending the new log contents to a pre-existing <PRE> tag on page (inspired by this post). This is all working beautifully.

My problem is that the new content is appended to the page but not immediately displayed. That is, all new log messages simply push the scroll bar higher.

I would like to keep the scrollbar "locked" to the bottom of the page, so that you can watch all the content appear in real time. I had originally been considering using jScrollPane to "lock" the scrollbar is at the bottom, but now I'm thinking that there might be an easier way to keep the focus on the bottom of the page...

I am writing a log "tail -f" application using jQuery on the client side. Currently, the application works by making AJAX requests to the server every 2 seconds and appending the new log contents to a pre-existing <PRE> tag on page (inspired by this post). This is all working beautifully.

My problem is that the new content is appended to the page but not immediately displayed. That is, all new log messages simply push the scroll bar higher.

I would like to keep the scrollbar "locked" to the bottom of the page, so that you can watch all the content appear in real time. I had originally been considering using jScrollPane to "lock" the scrollbar is at the bottom, but now I'm thinking that there might be an easier way to keep the focus on the bottom of the page...

• javascript
• jquery
• css
• overflow
• scrolltop

Share Improve this question Follow edited May 23, 2017 at 11:44 CommunityBot 111 silver badge asked Mar 18, 2011 at 18:57 mike4263mike4263 3322 silver badges44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You need to make scrollTop = scrollTHeight

var divx = document.getElementById("whatever");
divx.scrollTop = divx.scrollHeight;

Check working example at http://jsfiddle/sJshE/3/