MooScroller

docs

On (CNET's TV site) site they use flash a lot (understandibly; it's all about video and stuff). They had this component:

It was a flash app, but it's presence (there were several on the page) was negatively affecting the performance of the video player for some reason, so we recreated it in javascript.

MooScroller lets you re-create the overflow scrollbar and style it however you want. You can do horizontal or vertical scrolling or both (by having two instances of the class on the same container). You have to provide it the elements that are the scroll bar, the up-scroll and down-scroll (these two are optional), and you have to style it all yourself.

The class will figure out the content and resize the scrollbar element appropriately. Additionally, you can update this if the content changes. So, for example, if you ajax in some new stuff into the container, you can execute .update() on the instance of the class and the scrollbar will resize, just like a real scroll bar.

The html used:

<div class="scroller">
	<div class="content">
		<ol>
			<li>one</li>
			<li>two</li>
			<li>three</li>
			<li>four</li>
			<li>five</li>
			<li>six</li>
			<li>seven</li>
			<li>eight</li>
			<li>nine</li>
			<li>ten</li>
		</ol>
		<p>a paragraph</p>
		<ol>
			<li>blah</li>
			<li>blah</li>
		</ol>
		<ol>
			<li>one</li>
			<li>two</li>
			<li>three</li>
			<li>four</li>
			<li>five</li>
			<li>six</li>
			<li>seven</li>
			<li>eight</li>
			<li>nine</li>
			<li>ten</li>
		</ol>
	</div>
	<div class="scrollarea">
		<div class="scrollBack"></div>
		<div class="scrollBarContainer">
			<div class="scrollKnob"></div>
		</div>
		<div class="scrollForward"></div>
	</div>
</div>

The html rendered:

Now execute this code to enable the scrollbar:

new MooScroller($E('div.scroller div.content'), $E('div.scroller .scrollKnob'), {
	scrollLinks: {
		forward: $E('div.scroller div.scrollForward'),
		back: $E('div.scroller div.scrollBack')
	}
});

new MooScroller($E('div.horzscroller div.content'), $E('div.horzscroller .scrollKnob'), {
	mode: 'horizontal',
	scrollLinks: {
		forward: $E('div.horzscroller div.scrollForward'),
		back: $E('div.horzscroller div.scrollBack')
	}
});

new MooScroller($E('div.bothscroller div.content'), $E('div.bothscroller .vscrollarea .scrollKnob'), {
	scrollLinks: {
		forward: $E('div.bothscroller .vscrollarea div.scrollForward'),
		back: $E('div.bothscroller .vscrollarea div.scrollBack')
	}
});
new MooScroller($E('div.bothscroller div.content'), $E('div.bothscroller .wscrollarea .scrollKnob'), {
	wheel: false,
	mode: 'horizontal',
	width: 400,
	scrollLinks: {
		forward: $E('div.bothscroller .wscrollarea div.scrollForward'),
		back: $E('div.bothscroller .wscrollarea div.scrollBack')
	}
});