main.css

html, body{
    font:14px "Georgia";
}
h1, h2, h3, h4{
    margin:0 0 10px;
    font-family:Georgia;
}
#wrapper{
    min-width:360px;
    max-width:1600px;
    margin:0 auto;
    -webkit-box-shadow:0 0 10px #ccc;
    -moz-box-shadow:0 0 10px #ccc;
    box-shadow:0 0 10px #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:20px;
}
p{
    margin:0 0 10px;
}
.box{
    position:relative;
    height:400px;
    border:1px solid #ddd;
    -webkit-box-shadow:0 0 5px #ddd inset;
    -moz-box-shadow:0 0 5px #ddd inset;
    box-shadow:0 0 5px #ddd inset;
    padding:5px; margin:0 0 20px;
}
.scroll-horizontal p{
    width:2000px;
}
.scroll-old, .scroll-step, .scroll-button{
    position:relative;
    overflow:hidden;
    height:100%;
}
.scroll-old .scroll-track, .scroll-step .scroll-track, .scroll-button .scroll-track{
    opacity:1; filter:alpha(opacity=100);
}
input[type="text"]{
    width:40px;
}
.box .drag-top{
    position:absolute;
    left:0; top:0;
    height:10px; width:100%;
    background:green;
}
.box .drag-body{
    position:absolute;
    left:0; bottom:10px; top:10px;
    width:100%;
    background:#9acd32;
}
.box .drag-bottom{
    position:absolute;
    left:0; bottom:0;
    height:10px; width:100%;
    background:green;
}
code{
    margin:0 0 10px;
    padding:10px 15px;
    background:#F8F8F8;
    border:1px solid #ccc;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    vertical-align:middle;
    display:block;
}
.traking{
    padding:10px;
    border-bottom:1px solid #aaa; border-left:1px solid #aaa;
    -webkit-box-shadow:1px 1px 2px #aaa;
    -moz-box-shadow:1px 1px 2px #aaa;
    box-shadow:1px 1px 2px #aaa;
    background:#fff;
    z-index:2;
}
.traking ul{
    margin:0;
    padding-left:15px;
}
@media screen and (max-width: 980px){
    .traking{
        width:auto;
        min-width:320px;
        max-width:600px;
        margin:0 auto;
        position:relative;
        -webkit-box-shadow:0 0 10px #ccc;
        -moz-box-shadow:0 0 10px #ccc;
        box-shadow:0 0 10px #ccc;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        border:none;
        border-top:1px solid #aaa;
    }
}
.red{
     color:red;
    display:none;
 }
.scroll .red{
    display:block;
}
.up-and-down-button{
    padding:10px 0;
}
.scroll-up{
    position:absolute;
    right:-2px; top:0;
    cursor:pointer;
    width:10px; height:10px;
    background:url("up.png") no-repeat center;
}
.scroll-down{
    position:absolute;
    right:-2px; bottom:0;
    cursor:pointer;
    width:10px; height:10px;
    background:url("down.png") no-repeat center;
}

/*

Scroll
======

Custom adaptive scrolling

## Supported in browsers and devices:

- iPhone and iPad
- Firefox 3.6+
- Opera 10+
- Chrome and Safari
- Internet Explorer 7+

## Installation

Include tag link for styles:

    <link rel="stylesheet" type="text/css" href="/path/to/scroll.css" media="all" />

Include script **after** the jQuery library:

    <script src="/path/to/jquery.scroll.js"></script>

## Usage:

Simply start! [base example](http://csscode.ru/test/scroll/)

    new Scroll();

## Configuration

**All configuration is optional**

####Horizontal scrolling [example](http://csscode.ru/test/scroll#horizontal):

    new Scroll({
        horizontal:true // default - false
    });

####Сode within the slider [example](http://csscode.ru/test/scroll#drag-old):

    new Scroll({
        drag_old: '<div class="drag-top"></div><div class="drag-body"></div><div class="drag-bottom"></div>' // default - false
    });

####Custom classes for the node:

    new Scroll('.scroll-myclass-name', { // name main wrapper
        cls: ['scroll-wrap', 'scroll-pane', 'scroll-track', 'scroll-drag'] // strict sequence
    });

####Run all scrolling right off, set step (speed) and support Apple device support:

    new Scroll({
        start: true, // default - false
        step : 5, // step (speed), default - 5
        iDeviceSupport: false // off support Apple device, default - true
    });

## Events

**Delegate events to track the behavior and to get debug information.**

####Events list:

    // example
    $('body').on('eventname', '.scroll', function(event, data){
        console.dir(data);

        // data.config.cls      - array current clasess
        // data.config.drag_old - if is html inner slider then this html else false
        // data.config.horizontal - if is horizontal then true
        // start: false - start?
        // step: 5 - step

        // data.node == div.scroll
        // data.tracking.scrollHeight - height scrolling box
        // paneHeight - height wrap contents
        // dragHeight - height slider
        // dragTop - The distance from slider top border to the top dead dott wrapper
        // dragBot - The distance from slider bottom border to the bottom dead dott wrapper
    });

####The event name
- **scrolling.load**       - start init scripts
- **scrolling.create**     - create node
- **scrolling.loaded**     - script loaded

- **scrolling.mouseenter** - The event mouse enter for class name .scroll node
- **scrolling.mouseleave** - The event mouse leave
- **scrolling.mouseover**  - The event mouse over
- **scrolling.mouseout**   - The event mouse out
- **scrolling.mousedown**  - The event mouse down
- **scrolling.mousemove**  - The event mouse move
- **scrolling.mouseup**    - The event mouse up

- **scrolling.left**       - The event occurs when the slider to the left dead dott
- **scrolling.right**      - The event occurs when the slider to the right dead dott
- **scrolling.top**        - The event occurs when the slider to the top dead dott
- **scrolling.bottom**     - The event occurs when the slider to the bottom dead dott
- **scrolling.scroll**     - The event scrolling

## Set position:

    $('#set-pos').click(function(e){
        var event = jQuery.Event("scrolling.set"); // create event
        event.scrollY = 100; // custom position by Y, optional '+number' or '-number', example '+54'
        event.scrollX = 100; // custom position by X if horizontal scrolling, optional '+number' or '-number', example '-76'
        event.duration = duration; // duration animate
        event.easing   = 'linear'; // default 'swing'
        $(".scroll").trigger(event); // call start
        return false; // stop default event
    });

*Button Up or Down [example](http://csscode.ru/test/scroll#up-and-down-button):*

    $('.scroll-up').click(function(e){
        var event = jQuery.Event("scrolling.set");
        event.scrollY = '-20';
        event.duration = 300;
        $(".scroll").trigger(event);
        return true;
    });

*/