I wrote a small piece of javascript that creates a css styled scrollbar from the Mootools (version 1.2b2) Slider class. I know there is a scrollbar class for Mootools but it’s more than 100 lines of code. If you only need one or two bars, try my solution instead. The example page shows three div elements with a styled horizontal and/or vertical scrollbars.

Mootools Scrollbar
Mootools Powered Scrollbar

Update: making it work with Mootools 1.11

It’s easy to get his working under Mootools 1.11. The syntax for getting the scrollsizes and sizes in Mootools 1.2b2 has changed a bit:

// => Mootools 1.2b2, elements' size and vertical scrollsize
var size = element.getSize().y;
var scrollSize = element.getScrollSize().y;
// => Mootools 1.11, elements' size and vertical scrollsize
var size = element.getSize().size.y;
var scrollSize = element.getSize().scrollSize.y;

For the scrollbars, I’ve used the size and scrollsize of the content element. So to get the scrollbars working under Mootools 1.11, you have to change only one line per scrollbar (see the steps option):

// => For vertical scrollbars
...
new Slider(scrollbar, handle, {
	steps: content.getSize().scrollSize.y - content3.getSize().size.y,
	mode: 'vertical',
...
// => For horizontol scrollbars
...
new Slider(scrollbar, handle, {
	steps: content.getSize().scrollSize.x - content3.getSize().size.x,
	mode: 'vertical',
...