Uvumi Scrollbar 1.1.0

UvumiTools Scrollbar Plugin

  Add it to your Download Basket!

 Add it to your Watch List!


Rate it!

What's new in Uvumi Scrollbar 1.1.0:

  • 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
send us
an update
MIT/X Consortium License 
Uvumi LLC
ROOT \ Internet \ HTTP (WWW)
1 Uvumi Scrollbar Screenshot:
Uvumi Scrollbar - Uvumi Scrollbar demo
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.

Last updated on December 16th, 2008

feature list requirements

#scrollbar plugin #scrollable containers #Javascript Framework #scrollbar #CSS #Javascript #Mootools

Add your review!