title: Scrolling Overflowed DIVs with JavaScript
body: <p>I've got a div that uses overflow:auto to keep the contents inside the div as it is resized and dragged around the page. I'm using some ajax to retrieve lines of text from the server, then append them to the end of the div, so the content is growing downwards. Every time this happens, I'd like to use JS to scroll the div to the bottom so the most recently added content is visible, similar to the way a chat room or command line console would work.</p>
  
  <p>So far I've been using this snippet to do it (I'm also using jQuery, hence the $() function):</p>
  
  <pre><code>$("#thediv").scrollTop = $("#thediv").scrollHeight;
  </code></pre>
  
  <p>However it's been giving me inconsistent results. Sometimes it works, sometimes not, and it completely ceases to work if the user ever resizes the div or moves the scroll bar manually.</p>
  
  <p>The target browser is Firefox 3, and it's being deployed in a controlled environment so it doesn't need to work in IE at all.</p>
  
  <p>Any ideas guys? This one's got me stumped. Thanks!</p>