Aerovistae Aerovistae - 7 days ago 6
CSS Question

How can I auto-scroll as content is added to a div?

I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.

The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.

Ideas?

Answer

You can use scrollTop method after each text addition:

$("div").scrollTop($("div").children().height());

Use inner block to get the true height.

DEMO: http://jsfiddle.net/eyY5k/1/

Comments