ScrollHeight not updating in IE8 using JQuery

Question

I am trying to append some text (divs) to a scrollable div and then automatically scroll the the bottom.

For some reason, when I try to do this in IE8, it is not working. Uncommenting the 'alert' lines show that IE8 returns two values for the ScrollHeight attribute.

Does Jquery appends run asynchronously or does the DOM take time to refresh?

What is the correct way to handle this?

Html page in question:

Styles:

.scrollbox
{
   border-style: solid;
   overflow-y: scroll;
   padding: 5px;
   margin: 20px;
   border-color: #C0C0C0;
   height: 400px;
   width: 500px;
   font-family: "Times New Roman", Times, serif;
   font-size: 20px;
   color: #333333;
}

Jquery script:

$(document).ready(function() {
    var node = $("#list");
    for (i = 1; i <= 100; i++) {
        node.append("<div>Item :" + i + "</div>");
    }
    //alert(node.attr("scrollHeight"));
    //alert(node.attr("scrollHeight"));
    node.animate({ scrollTop: node.attr("scrollHeight") }, 500);
});

Body:

<div id="list" class="scrollbox"></div>

Answer 1

Have you tried using node.outerHeight() instead of getting the value of scrollHeight?

Answer 2

try using jQuery's innerHeight() value, also Ibeleive you need 'px' with the value.

node.animate({ scrollTop: node.innerHeight() + 'px' }, 500);

Answer 3

I too am getting this problem - it seems like a defect in IE8 to me (compatibility mode does not exhibit the same behaviour). In my case I just read the value once to 'prime' it and ignore the result, then subsequent reads are correct. Not ideal but seems to work fine.