ProScroll

Description

Adds js horizontal and vertical scrolling to an overflow: auto container. Turns the auto to hidden and inserts the needed track and handles for Scriptaculous Control.Sliders.

Usage

var scroller = new ProScroll('scrollMe', {
  axis: 'horizontal'
}); 

Example HTML:

<div id="scrollMe">

    <div id="content">
        <p>Some Crazy Amount of stuff</p>
    </div>

</div>

Example CSS:

<style type="text/css">
#scrollMe {
    height: 300px;
    width: 200px;
    border: 1px solid black;
    overflow: auto;
    position: relative;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1em;
}
#content p {
    width: 250px;
}

div.horizontal_scrollbar {
    position: absolute;
    bottom: 2px;
    left: 2px;
    hieght: 5px;
    width: 196px;
    background-color: gray;
}

div.horizontal_scrollbar_handle {
    background-color: red;
    height: 5px;
    width: 10px;
}
div.vertical_scrollbar {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 290px;
    background-color: gray;
}

div.vertical_scrollbar_handle {
    background-color: red;
    width: 5px;
    height: 10px;
}
</style>

Options

Option	Default	Description
axis	‘both’	can be ‘vertical’, ‘horizontal’ or ‘both’. Sets the appropriate scrollbar(s)
trackClassName	‘scrollbar’	Class name added to the bar div
handleClassName	‘scrollbar_handle’	Class name added tp the handle div

For both classNames above they will be prefixed with either ‘vertical_’ or ‘horizontal_’.

Credits

Thanks to LivePipe for creating great Prototype extensions. ProScroll is using the mouse:wheel event provided from Live Pipe which is licensed under MIT .