MooScroll 0.52 beta
MooScroll is a MooTools 1.2 class that allows you to customize how the scrollbar looks on scrollable divs.
Syntax:
html:
<link rel="stylesheet" href="css/mooscroll.css" type="text/css" media="all" />
...
<div class="scroll">Content Here</div>
...
<script type="text/javascript" src="js/mootools-1.2-core-yc.js" ></script>
<script type="text/javascript" src="js/mootools-1.2-more.js" ></script>
<script type="text/javascript" src="js/MooScroll_0.52.js" ></script>
javascript:
var myScroll = new MooScroll({/*options here*/});
Options:
- selector [string]: CSS style selector to determine what elements get MooScrolled. Default = ".scroll"
- increment[number]: Number of pixels that are scrolled at a time. Default = 30
- handleOpacity [number]: Opacity of scroll handle. Default = 1
- handleActiveOpacity [number]: Opacity of scroll handle while it is being dragged. Default = 0.85
- disabledOpacity [number]: Opacity of scroll bar when there is not enough content to scroll. Default = 0.5
- wrapperClass [string]: Class of div that wraps an entire MooScroll area. Default = "mooScroll"
- scrollBarClass [string]: Class of scroll bar div. Default = "scrollBar"
- scrollHandleClass [string]: Class of scroll handle wrapper div. Default = "scrollHandle"
- scrollHandleBGClass [string]: Class of scroll handle bg div. Default = "scrollHandleBG"
- scrollHandleTopClass [string]: Class of scroll handle top div. Default = "scrollHandleTop"
- scrollHandleMiddleClass [string]: Class of scroll handle middle div. Default = "scrollHandleMiddle"
- scrollHandleBottomClass [string]: Class of scroll handle bottom div. Default = "scrollHandleBottom"
- scrollControlsYClass[string]: Class of wrapper div around vertical scroll controls. Default = "scrollControlsY"
Examples:
View Examples
Notes:
Requirements: MooTools 1.2 Core, MooTools More (Slider and Drag plugins)
Compatibility: All A-grade browsers.
The creation of a MooScroll instance must be wrapped in a domready event.
window.addEvent('domready', function() {
var myScrollArea = new MooScroll({});
});
