admin 管理员组

文章数量: 1086019

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?

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?

Share Improve this question asked May 14, 2012 at 19:30 temporary_user_nametemporary_user_name 37.2k48 gold badges160 silver badges243 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

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/eyY5k/1/

I found this approach to work for my needs:

var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);

Do note this uses jquery.

本文标签: javascriptHow can I autoscroll as content is added to a divStack Overflow