javascriptinternet-explorerdom-eventsonscrollhtmlcontrols

"scrollHeight" not updated in "onscroll" event handler when using HtmlCtrl in an application but works correctly in IE9

When sample below code loads in IE9, it works correctly, but when loads in an html control in an application, scrollHeight not updated in onscroll event handler when I change the innerHTML content in the handler, and therefore the alert not to be displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function f()
{
    var nBodyHeightOld = document.getElementById("div1").scrollHeight;
    document.getElementById("div1").innerHTML += '<div>It is a test!</div>';
    if (document.getElementById("div1").scrollHeight != nBodyHeightOld)
        alert('scrollHeight changed!');
}
</script>
</head>
<body>
<div id='div1' style='overflow:scroll; height:300px' onscroll="f()">
    <div style='height:400px'></div>
</div>
</body>
</html>
Solution

  • Becuse the application use IE8. To force application use IE9 add meta tag to html:

    <meta http-equiv="X-UA-Compatible" content="IE=9" >