Skip to content
This repository


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…


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



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.


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

Example HTML:

<div id="scrollMe">

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


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;


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_’.


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.