<style type="text/css">
div{
overflow-x:scroll;
width:10%;
height:10%;
border:1px blue solid;
position:relative;
}
</style>
<body>
<div id="d1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="d2">
bbbbbbbbbbbbbbbbbbb
</div>
</body>
<script>
var div1 = document.getElementById("d1");
var div2 = document.getElementById("d2");
function a(){
div2.onscroll = null;
div2.scrollLeft = this.scrollLeft;
div2.onscroll = b;
}
function b(){
div1.onscroll = null;
div1.scrollLeft = this.scrollLeft;
div1.onscroll = a;
}
div1.onscroll = a;
div2.onscroll = b;
</script>
