Scrollbar.js

by Enrique Erne

HTML

<script src="https://github.com/eerne/scrollbar/raw/1.2.x/Source/Scrollbar.js"></script>
move to element <a id="move1st" href="#">1st</a> <a id="move2nd" href="#">2nd</a> <a id="move3rd" href="#">3rd</a>

or move knob to <a id="move0" href="#">0px</a> <a id="move10" href="#">10px</a> <a id="move100" href="#">100px</a> <a id="move300" href="#">300px</a>

<br />

<div id="products"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul></div>
<div id="bar"><div id="knob"></div></div>

CSS

#products {
    width: 480px;
    height: 160px;
    overflow: hidden;
    position: relative;
}

#products ul {
    width: 3000px;
}

#products li {
    color: #888;
    float: left;
    width: 200px;
    position: relative;
    font-size: 156px;
    text-align: center;
    padding-top: 10px;
    line-height: 156px;
    list-style-type: none;
}

#bar {
    width: 480px;
    height: 21px;
    position: relative;
    background-color: #aaa;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#knob {
    top: 1px;
    left: 1px;
    width: 100px;
    height: 19px;
    position: relative;
    background-color: white;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

JavaScript

var myProducts = new ScrollBar('products', 'bar', 'knob', {
    scroll: {
        duration: 2000,
        transition: 'elastic:out',
        onStart: function(){
        // console.log('start ' + this.to[0]);
        },
        onComplete: function(){
        // console.log('complete ' + this.to[0]);
        }
    },
    slider: {
        offset: -1,
        onChange: function(pos){
        // console.log('change ' + pos);
        },
        onComplete: function(pos){
        // console.log('complete ' + pos);
        }
    },
    knob: {
        duration: 1200,
        transition: 'elastic:out',
        onStart: function(){
        // console.log('start ' + this.to[0].value);
        // knob position
        }
    }
});

// move to position
myProducts.set(50);

var products = $$('#products li');
document.id('move1st').addEvent('click', function(){ myProducts.set(products[0]); });
document.id('move2nd').addEvent('click', function(){ myProducts.set(products[1]); });
document.id('move3rd').addEvent('click', function(){ myProducts.set(products[2]); })

document.id('move0').addEvent('click', function(){ myProducts.set(0); });
document.id('move10').addEvent('click', function(){ myProducts.set(10); });
document.id('move100').addEvent('click', function(){ myProducts.set(100); });
document.id('move300').addEvent('click', function(){ myProducts.set(300); });