Skip to content
This repository

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

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.textile
Octocat-spinner-32 index.html
Octocat-spinner-32 proscroll.js
Octocat-spinner-32 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.