The problem

There is a bug that I'm working on which involves a page that contains a portlet with a fixed width and horizontal scroll bar - the scroll bar does not appear to work in IE 9, but all other browsers seem to be fine.

For simplicity I reduced the page to the following HTML snippet containing the style and javascript.

This HTML document displays a scrollable div with some text and a section that is right aligned which is updated via javascript so that it will continually displayed as right aligned.

And yes, there are many other ways to accomplish this using pure CSS, but what I don't understand is this - why does updating the style.left of some child element stop the scroll from happening?

It just doesn't make sense to me. Also... the reply "IE is just weird/buggy..." is not what I'm looking for

The Code

Available as a gist

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
#scroller{
  overflow: auto;
  width:500px;

  /*
    Remove height:100% and you get some weird behavior in IE9.
    The initial scroll stops, but second scrolling attempt works
    but the scroller div keeps growing vertically any time you
    scroll horizontally.

    Keep it, and the horizonal scroll is basically useless.
    Clicking the handle only scrolls one pixel, clicking the
    arrow buttons will only allow one scroll (continuous scroll
    is not working). Clicking the trough (or track) seems 
    unaffected
  */
  height:100%
}
#content{
  width:600px;
}
#buttonBar{
  position: relative;
}
#buttonArea{
  float: right;
}
</style>

<script>
function onScroll(scroller, event) {
  var buttonBar = document.getElementById('buttonBar');
  buttonBar.style.left = scroller.scrollLeft + 'px';
}
</script>
</head>
<body>

<div id="scroller" onscroll="onScroll(this,event)">

  <div id="content">Scrolling Content</div>
  <div id="buttonBar">
    <div id="buttonArea">
      Right Aligned
    </div>
  </div>

</div>

</body>
</html>