Uvumi Scrollbar 1.1.0

UvumiTools Scrollbar Plugin
Uvumi Scrollbar - Uvumi Scrollbar demo
  1 Screenshot
Uvumi Scrollbar is a plugin that works like a usual scrollbar but is fully generated with CSS and Javascript, thanks to the Mootools Javascript Framework. Internet Explorer is the only browser that lets you modify scrollbar styles using special CSS properties while other browsers like Firefox are more standards-compliant and don't have the ability to modify what is outside the HTML document.

While it's ok to have a blue/gray scrollbar on the side of the window, sometime you have scrollable containers right in the middle of your page, and you wish those could blend into your yellow and pink CSS theme. Sure, IE will let you do it, but other browsers will throw CSS errors and warnings if you use the IE custom scrollbar rules. If you are stoked on web standards like we are, IE-only CSS properties are simply unacceptable.

With Javascript, you can scroll elements; you can create buttons; you can creates buttons that scroll elements. Then with CSS you can position those buttons where you want, and even better, you can make those buttons the color and size you want. That's it. We can make a scrollbar using buttons!

How To


new UvumiScrollbar(element, options);


 * Element: The element you want to apply the scrollbar to. It can be the element's ID or a pointer to the element object itself.
 * Options: an object that will allow you to modify some of the default properties. Like the name says, options are optional. For the live example on top of this page, no argument was passed.


 * baseClass: string defining the CSS class name to be applied to the scrollbar wrapper element. That means everything inside this wrapper (all the buttons and bars) will be affected by this class. This is only in case you're going to have several scrollbars styled differently in the same document. Otherwise we recommand you stick to the default class name scrollBar, which matches to downloadable style sheet.

Known Issues

 * Click-Drag Selection in IE: We've been able to reproduce all the scroll behaviors, including when you hightlight text : the content will scroll, following your pointer, while you hold the mouse down, letting you selecting all the text... in Firefox, Opera, Safari... but not IE. For some reason, IE didn't let you highlight text when this "auto-scroll on mouse down" was enabled. An event propagation issue. So we prefred to diable it in IE. Its not as cool, but at least it let you select text.

Main features:

  • Requires no Javascript knowledge:
  • Simply call the script with the the id of the element you want to recieve a scrollbar --it's one line you code that you can copy/past from the How To section.
  • Requires no HTML preparation:
  • The script will build the elements necessary for the scrollbar--they don't have to be there from the beginning cluttering up your well-structured code.
  • Non-obtrusive:
  • Users who disable Javascript (real users, not bots) will still be able to scroll the content with regular scrollbars, unless you specified the opposite with CSS.
  • Cross-Browser Compatible:
  • Tested in the major browsers: Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9, Safari 3. All on Windows systems. We didn't get a chance to test on Mac or Linux. If anyone encounters any problems in other browsers/operating systems, please let us know. We only support real browsers -- No need to email us with IE4 or AOL issues. We know about that, and frankly we just don't care.
  • Cutomizable with CSS:
  • It's the whole point of those scrollbars, you can make them look how you want, you can have huge buttons if that's what you like. You want bloody skulls instead of nice little arrows? just change the buttons' background images.
  • Displays only the necessary scrollbars: If no scrollbar is needed horizontally, the horizontal scrollbar won't be generated. Same thing vertically.
  • Can be updated:
  • If the scrollable content is modified, you can call the scrollbar update() function which will adjust the scrollbars to the new content, eventually adding or removing them.

last updated on:
December 16th, 2008, 4:59 GMT
license type:
MIT/X Consortium License 
developed by:
Uvumi LLC
ROOT \ Internet \ HTTP (WWW)
Uvumi Scrollbar
Download Button

In a hurry? Add it to your Download Basket!

user rating



Rate it!
What's New in This Release:
  • The scrollbar's jumpy behavior has been fixed; now it's all smooth.
  • The scroll knobs have additional CSS customization.
  • This release is stable with Mootools 1.2.1.
read full changelog

Add your review!