IE 9 Weird Horizontal Scroll Bar Issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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