Skip to content

@codefactor /ie9_problem.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
IE 9 Weird Horizontal Scroll Bar Issue
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.