<style type="text/css">
<!--
#container {
position : absolute;
top :0px;
left : 2px;
width : 330px;
height : 140px;
background : white;
overflow : hidden;
border : 1px solid #D08847;
z-index     : 400;
    
}

#content {
position : relative;
width : 320px;
left : 5px;
z-index     : 400;
}


#scrollArea {
position : absolute;
left : 338px;
top : 18px;
height : 104px;
width : 15px;
border : 1px solid #667;
overflow : hidden;
        
}

#scroller {
position : absolute; 
top : 18px;    
width : 15px;
background : #AAA;
border-top : 1px solid #667;
border-bottom : 1px solid #667;
}

#scroll_arrow_up {
position : absolute; 
top : 0px;     
width : 15px;
left : 338px;    
border      : 1px solid #667;
text-align  : center;
cursor      : pointer;
}

#scroll_arrow_down {
position : absolute; 
top : 125px; 
width : 15px;
left : 338px; 
text-align  : center;
border    : 1px solid #667;
cursor      : pointer;
height: 16px;
}
-->
</style>
    <script type="text/javascript" src="yourscripts/dom-drag.js"></script>
    <script type="text/javascript" src="yourscripts/custom_scroller.js"></script>
    <script type="text/javascript">
    onload = scroller.init;
    </script>
    
    <!-- scroll area start -->
    <div id="custom_scroller" style="position:relative;height:145px;padding:2px;">
    <div id="scroll_arrow_up"
     onmousedown="scrollUp(event)" 
     onmouseup="cancelScrolling(event)"
     onmouseout="cancelScrollingOut()">
     <img src="6/images/arrow_up.gif"></div>
    <div id="scroll_arrow_down" 
     onmousedown="scrollDown(event)" 
     onmouseup="cancelScrolling(event)"
     onmouseout="cancelScrollingOut()">
     <img src="6/images/arrow_down.gif"></div>
    <div id="scrollArea">
    <div id="scroller"></div>
    </div>

    <div id="container">
      <div id="content">
      <p>This is line 1 - keep Scrolling</p>
      <p>This is line 2 - keep Scrolling</p>
      <p>This is line 3 - keep Scrolling</p>
      <p>This is line 4 - keep Scrolling</p>
      <p>This is line 5 - keep Scrolling</p>
      <p>This is line 6 - keep Scrolling</p>
      <p>This is line 7 - keep Scrolling</p>
      <p> </p>
      <p> </p>
      </div>
    </div>
    
    </div>
    <br style="clear:all"></br>
    <!-- end of scroller -->