Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
scrollbar plugin with touch device support.
JavaScript
Branch: master
Failed to load latest commit information.
css Optimization and tweaks here and there
images initial commit
js update
README.md update
grunt.js initial commit
index.html initial commit

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
* 
*/
Something went wrong with that request. Please try again.