public
Created

IE 9 Weird Horizontal Scroll Bar Issue

  • Download Gist
ie9_problem.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.