How to Add Div Scrolling on Top and Bottom

HTML Markup:

<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
My Scrolling Content
</div>
</div>

CSS Style:

.wrapper1, .wrapper2 {width: 840px; overflow-x: scroll; overflow-y:hidden;}
.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; overflow: auto;}

Jquery Script:

<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".wrapper1").scroll(function () {
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function () {
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
});
</script>