How to use Custom Graphical Scrollbars for a scrolling div, overflow:auto

I am trying to use a scrolling div in a cell within a table on my site. It works fine, but wondered how to go about using a custom graphic scrollbar, explained as simply as possible, or code examples given. That is a custom bar as well as custom arrow-up and down.

I would also like the contents of the cell to start scrolling on mouseover the arrow-up or arrow-down but do not know what to look for in learning how to do so.

I have placed in between my HEAD tags:

<style type="text/css" media="screen">
<!--
.scroller {
  display:block;
  position:relative;
  width: auto;
  height: 50px;
  margin:0;
  padding:5px;
  background:inherit;
  color:inherit;
  overflow:auto;
}
-->
</style>

then

<div class="scroller"></div>  within the cell where I have placed the scrollable content (a table).

Any help would be more than welcome!