Jquery - Scroll a DIV(overflow:auto;) with a DIV

how can i scroll a DIV (overflow:auto;) with a DIV?

HTML

<div style="width:100px; height:200px; border:1px solid #ff0000; overflow:hidden;">
   <div id="my_div" style="width:100%; padding-right:20px; height:100%; overflow:auto;" class="sph">
       <div style=" background-col开发者_Go百科or:#c6c6c6; width:10px; height:20px; position: absolute; left:80px; cursor:pointer;" >S</div>
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />
       .. content ...  <br />       .. content ...  <br />       .. content ...  <br />       
   </div>

</div>

<br /><br >
  Use the MouseScroll to scroll or use the [S]croll Div

Example http://jsfiddle.net/sbAfW/11/

Thanks in advance!

Peter

Check out the jScrollPane plugin.

The first demo on the demo page is what you might be looking for. You could just remove the background attributes from the jspVerticalBar and jspTrack classes and you're on your way!