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. Chris

    This comment is to help all of you who have had the same misfortune that I have suffered from for the past 3 weeks:

    I couldn’t figure out why the scrollbar wouldn’t scroll all the way to the bottom of the scroll area – it would just stop halfway through and cut off the bottom half of the content –

    I kept going through the script thinking something was wrong – but it was actually a very silly mistake on my part –

    I had IMAGES in my scroll area – and you HAVE to set the HEIGHT attribute to your IMG TAGS otherwise the scrollbar miscalculates the height of the scroll area!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Hopefully whoever runs into this same issue of having the scrollbar stopping short of finishing the scroll area can solve the issue much quicker than it took me.

    Thank you for the awesome and simple script again Gondo!

  2. Dave

    Hey, I use your scroller for a project but I have a dilemma! That being, in Firefox I’ll remove my finger from my mouse and the bar will still follow my mouse back and forth which is not very convenient when trying to read what’s within that text field! Any input would be greatly appreciated.

  3. sunnny

    Hello, sorry if this was already posted but I didn’t read all the emssages above.

    Anyway, in order to fix the whole page scrlling issue just take a look at this page:

    http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel

    You can modifiy the scroll.js (thank you by the way, great script! :) in this way:

    copy the hookEvent, unHookevent and cancelEvent function

    then in the wheel function just add at the end

    return cancelEvent(event);

    and this fix the problem. Credits go to http://www.switchonthecode.com for the proper managment of events related to mouse wheel

  4. bonezz

    Whooooo… great. Thanks to gondo for this script, thanks to bejko for fixing content selection bug and thanks to sunny for page scrolling issue fix.

    Now it works like a charm :))

    regards!

  5. Pingback: Cool iPhone Apps | Smashing Apps | Cool iPhone Apps | Download Vector & PSD Free » Free JavaScript Scroll bar Scripts

  6. heilsteine lexikon

    FalkenaugeAnwendung und Wirkung von Purpurit in der EsoterikPurpurit ist ein guter
    Stein um alte Verletzungen und Traumas endlich zu verarbeiten und
    ins Bewusstsein zu integrieren; wir lernen Offensichtliches nicht l?
    T in elementarer Form in der Natur vor und ist deshalb ein sehr guter Schutzstein.

    Der Stein eignet sich sehr gut um heilsteine bedeutung zu reinigen in dem man sie in eine Druse legt.
    Anwendung und Wirkung von Dioptas in der Esoterik: Der Aventurin f?
    Es bergangsmetall Herkunft und Vorkommen von SmaragdDie Anfnge des Smaragd-Abbaus liegen
    im alten gypten.