scrollbar plugin with touch device support.
HTML JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
js
.gitignore
Gruntfile.js
README.md
index.html
package.json

README.md

gscrollbar

jquery custom scrollbar plugin with touch device support, lightweight and easy to use.

usage

initialize

// can also pass an options setting as argument
$('.scroll').gscrollbar();

update

To do an update simply call the plugin again and an initialized element and pass the string update as a first argument. The second argument can be a number, an element or an anchor.

$('#scroll1').gscrollbar('update', 100); // update with a given number

options

$.fn.gscrollbar.defaults = {
    axis: 'y', // vertical or horizontal scrollbar? ( x || y ).
    wheel: 40,  //how many pixels must the mouswheel scroll at a time.
    scroll: true, //enable or disable the mousewheel;
    size: 'auto', //set the size of the scrollbar to auto or a fixed number.
    sizethumb: 'auto' //set the size of the thumb to auto or a fixed number.
};

CSS

.gscrollbar .viewport { 
    overflow: hidden; 
    position: relative; 
}
.gscrollbar .overview {
    list-style: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    padding: 0; 
    margin: 0; 
}
.gscrollbar .scrollbar{
    position: relative; 
    float: right; 
    width: 10px;
}
.gscrollbar .track {
    background: #f4f4f4;
    height: 100%;
    width: 10px;
    position: relative;
}
.gscrollbar .thumb {
    background: #ccc;  
    height: 20px; 
    width: 10px; 
    cursor: pointer; 
    overflow: hidden; 
    position: absolute;
    border-radius:5px;
    top: 0;
}
.gscrollbar .disable { 
    display: none; 
}

credits

gscrollbar is based on tiny scrollbar and it released under the same license.

The differences between the 2 plugins are the following:

  • Different API
  • gscrollbar inject the DOM it needs, tiny expects it (for every instance)
  • gscrollbar is slightly bigger (2.48 against 2.29 minified)

So not much really, tiny scrollbar is really good I just didn't like having to set up the markup it expects in my documents for each element using it.

Tiny Scrollbar Copyright Notice

/*!
* Tiny Scrollbar 1.66
* http://www.baijs.nl/tinyscrollbar/
*
* Copyright 2010, Maarten Baijs
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/gpl-2.0.php
*
* Date: 13 / 11 / 2011
* Depends on library: jQuery
* 
*/