javascript scrollbar

description:

This si some solution how to use javascript scrollbar which you can decorate how you want.
To use it, you have to link css and javascript files.
Then declare 2 divs in your html document calld “scrollholder” and “scroll and place your content.
After declarating these 2 divs you will need to load javascript scrollbar for these div’s.
You will do this by placeing a piece of javascript calling ScrollLoad() function.


You can also set your own sizes and colors for scrollholder and scroll divs.
To do this, use your own class, i recommend you not to style div by using identificator “#scrollholder”, rather use “.yourOwnClassName”.

files

  1. javascript file
  2. css file

parameters:

ScrollLoad ("scrollholder", "scroll", "1", true);

  1. means id of div where scrolling text id holded
  2. means id of div where is declarated content which you want to scroll
  3. means number of scrolling object (in javascript)
  4. menas if scroll tracker will calculate its size or not

features:

  • mouse wheele scrolling
  • automatic creating scrollbar by javascript – so if anyone dont have for some reason enabled javascript, he will be still able to scroll by default scrollbar (you can decorate it too)

css bug:

by using this i have found some css bug in opera with overflow (to see it just save example page and remove css declaration for #operaBug), so to solve this problem you need to put scroll divs to some another element (f.e. div again) and set to it css overflow: hidden;

Example

example page with javascript scrollbar

used on page

I’ve used it on several pages i’ve made, f.e.:

using:

<head>
...
<link rel="stylesheet" type="text/css" href="css/scroll.css" mce_href="css/scroll.css" media="screen,projection"/>
<script type="text/javascript" language="JavaScript" src="js/scroll.js" mce_src="js/scroll.js"></script>
...
</head>

first scrollbar

<body>
...
<div id="scrollholder" class="scrollholder">
<div id="scroll" class="scroll">
... place your scrolling content here ...
</div>
</div>
<script type="text/javascript">
<!--
ScrollLoad ("scrollholder", "scroll", true);
//-->
</script>
...
</body>

second and other scrollbars

...
<div id="scrollholder2" class="scrollholder">
<div id="scroll2" class="scroll">
... place your scrolling content here ...
</div>
</div>
<script type="text/javascript">
<!--
ScrollLoad ("scrollholder2", "scroll2", false);
//-->
</script>
...

features:

If in some reason is javascript disabled, it will show normal scrollbar which you can style. Firefox doesn’t support this.
I had some problems with some older version of browsers, so i preffer to set scrollbar style right to scroll element, even though its not so nice.


/* This property describes the color of the outer top and left bevel edges (the normally lighter portion of the "highlights") of the scrollbar arrows and scroll bar slider box portions of a scroll bar */
scrollbar-3dlight-color: #000000;
/* This property describes the color of the scrollbar directional arrows of a scroll bar when they are activate-able. When scrllbars appear but are not usable, this property does not control the arrow color in this state */
scrollbar-arrow-color:#999999;
/* This property describes the color of the outer bottom and right bevel edges (the normally darker portion of the "shadows") of the scrollbar arrows and scroll bar slider box portions of a scroll bar */
scrollbar-darkshadow-color:#ff0000;
/* This property describes the color for the button face of the scrollbar arrow widgets, the button face color of the slider widget and the main color of the inactive square at the bottom/right corner of the scrolled box. This property has no effect on the scrollbar tray/track that the scrollbar slider widget travels in */
scrollbar-face-color:#00ff00;
/* This property describes the color of the inner top and left bevel edges (the normally darker portion of the "highlights") of the scrollbar arrows, the scroll bar slider box, and half of the dither pattern color of the scrollbar slider tray area (the other half of the dither is taken from the OS default button face color.) */
scrollbar-highlight-color:#0000ff;
/* This property describes the color of the inner bottom and right bevel edges (the normally lighter portion of the "shadows") of the scrollbar arrows and scroll bar slider box portions of a scroll bar */
scrollbar-shadow-color:#666666;
/* This property describes the solid color of the scrollbar track */
scrollbar-track-color:#ffffff;

known problems:

scrolling by mouse wheele its also scrolling all page, not just the content you want.

terms of use:

there WAS just one, if you want to use this scrollbar includ back link to http://www.webdesigners.sk on every page where is this scorllbar used or just on your home page.

now, if you wamt to support me, you can also donate. amount is up to you :)

135 thoughts on “javascript scrollbar

  1. sofia

    hello there!thanks for your great scroll!
    It works fine and easy in FF and Safari but I get a black scroll bar in IE
    I don’t understand why…it’s like IE doesn’t get the css style….anyone else having the same problem?
    Any fix?

    Thanks in advance

  2. Estrellajmb

    Hi there, great script! Thank you so much for sharing.
    The only problem that I’m having is on the page load. The first time the page is loaded it shows a regular scroll bar in its place and then if refreshed it shows the js scroll. This is happening to me in FF, IE and Safari.

    Anyone have a solution?

    Sofia: post a link so we can see your code. I had no problems with the coloring in IE but would be glad to take a look for you.

  3. gondo Post author

    @Estrellajmb: hi and thanks. strange behavior what you are describing. I can just guess that it can be something with caching the code (that scrollbar JavaScript is not loaded to the page) or maybe some other JavaScript error on the page what stop executing of my JavaScript code.
    can you provide link ?

    @Sofia: we spoke earlier via FB, main problem is table layout and invalid html.

  4. Riz

    hi Gondo,

    I’m new working with website. I’ve tried this way, but i’m having the same problem as Estrellajmb have. I wish i could send you the files so you can correct me.

  5. Riz

    Hi Gondo,
    Another question. Can a page(html) support 2 different CSS (totally different size for the scrollbox)?

  6. Cas

    @bejko you are a life saver, the selection in Firefox was driving me mad! Gondo great script :)

  7. teslak

    Hi, I have problem. I put this scroller into my pages. It is on 4pages bud it works only on 1. On the others shows regular scrollbar and when I refresh the page than will show this one. On each page are diferent div id (scrollholder1, scrollholder2, etc…)
    Can you help me pls?

  8. gondo Post author

    @teslak: u got answer on email.
    @all: his problem was, that images didn’t have set height, thats why javascript decide not to show custom scrollbar. as soon as images was loaded, scrollbar was shown. thats why on refresh everything was alright, images were cached.

  9. CORe

    Thanks for the script.
    To avoid the selection of text when scrolling use:

    Disable Text Selection script – http://www.dynamicdrive.com/

    Can someone explain how make the dragbar-size fixed instead of the variable height depending on the content.

    thnx

  10. gondo

    @Melissa: hi, you haven’t loaded scroll.js properly to the page.
    in your source code, you are refereeing to “js/scroll.js” what is not very good approach, because this link is related to document and not to domain, so better way would be to use “/js/scroll.js” (note slash on the beginning)
    i’ve checked your page and it looks like you’ve put scroll.js to
    http://www.texasequinenetwork.com/JJNewMockup/scroll.js
    so to properly load it to page, use “/JJNewMockup/scroll.js”.

  11. Cat

    thx! it works perfect!
    I use the script in a i-frame and it works very fine.

    Is it possible to set a fixed height of the drag_bar, say 20 px?
    When I enter the value of 20px in the CSS nothing happens, the drag_bar stays very long.

    Please help me.

    Thanx,
    CAT