• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 28717
  • Last Modified:

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!
0
freespirit020199
Asked:
freespirit020199
  • 2
3 Solutions
 
cristy56Commented:
You can try to use Javascript to do the " start scrolling on mouseover the arrow-up or arrow-down" effect.

go to http://www.dynamicdrive.com
there are lots of scripts teaching u how to use JS to made scrolling content effect.

Regards,
Cristy
0
 
cristy56Commented:
I think this is what u need :
http://www.dynamicdrive.com/dynamicindex2/pagescroller.htm

Cristy
0
 
MMabatigCommented:
Try the following CSS attributes in the CSS definition of the scrollable DIV. Not sure if it will work for a <div>, but it works with the body element in IE.  It doenst seem to work in Firefox, maybe it will set you on the right path.

      scrollbar-arrow-color:#00346b;
      scrollbar-base-color:#5c8cbf;
      scrollbar-3dlight-color:#00346b;
      scrollbar-darkshadow-color:#00346b;
      scrollbar-highlight-color:#c0c0c0;
      scrollbar-shadow-color:#5c8cbf;


Cheers!
-Mark
0
 
DaydreamsCommented:
Hi freespirit,

Take a look at this:

http://www.dyn-web.com/dhtml/scroll/  (vertical scroll available)

At that site, you can download all the code from a link on the left.

..they have instructions for onmouseover in a table cell:

http://www.dyn-web.com/dhtml/scroll/scroll-rel.html

(hover your mouse over the small arrows and see the scroll)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now