Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
JS horizontal and vertical inserted Scroll bars on overflowed containers
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.textile
index.html
proscroll.js
proscroll.min.js

README.textile

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 .

Something went wrong with that request. Please try again.