Tiny Scrollbar is a nice and elegant way to enable the scrolling of content on mobile and desktop devices. Its designed to be a dynamic lightweight utility. Furthermore it gives a User Interface Designer a powerful way of enhancing the Ui (user interface) of a website.
It comes in 2 flavors as a vanilla Javascript microlib and a jQuery plugin. The jQuery plugin does not need any other external libaries like jQuery Ui.
Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.
The examples below are all for the jQuery Plugin. If you need some more (advanced) examples you can find them here. You can also find a example for the plain javascript library there.
$(document).ready(function()
{
$("#scrollbar1").tinyscrollbar();
});
$(document).ready(function()
{
// The axis option is for setting the dimension in
// which the scrollbar should operate.
//
$("#scrollbar2").tinyscrollbar({ axis: "x"});
});
$(document).ready(function()
{
// The size of the scrollbar can be set to a
// fixed number with the size option.
//
$("#scrollbar3").tinyscrollbar({ trackSize: 100 });
});
$(document).ready(function()
{
// The size of the scrollbar thumb can be set to a
// fixed number with the size option.
//
$("#scrollbar4").tinyscrollbar({ thumbSize: 15 });
});
var $scrollbar5 = $("#scrollbar5");
$scrollbar5.tinyscrollbar();
// Some madeup function that does changes to the content
// of the scrollbar.
//
setNewContent();
// To compensate for the changes in the content you can
// call the tinyscrollbar update function
//
var scrollbar5 = $scrollbar5.data("plugin_tinyscrollbar")
scrollbar5.update();
$(document).ready(function()
{
// You can use the update method to build a anchor.
//
var $scrollbar6 = $('#scrollbar6');
$scrollbar6.tinyscrollbar();
var scrollbar6 = $scrollbar6.data("plugin_tinyscrollbar");
// Create a anchor that scrolls the bar to 50 pixels
// when clicked.
//
$('.scrollbar6button').click(function()
{
scrollbar6.update(50);
return false;
});
});
A list of all the available options and there default value
$(document).ready(function()
{
// You can access the methods and properties of your
// scrollbar instance straight after initialization.
//
$('#box').tinyscrollbar();
// This part you can do from whatever place in your
// code as long as the scrollbar allready is initialized.
//
var box = $('#box').data("plugin_tinyscrollbar")
// Now you have access to all the methods and properties.
//
// box.update()
// console.log(box.contentPosition)
//
// etc..
});
$(document).ready(function()
{
var $box = $('#box');
var box = $box.tinyscrollbar();
$box.bind("move", function()
{
console.log("do something on every move");
});
});
Tinyscrollbar is a free script its licensed under the MIT license. However a donation for my labor of love is greatly appreciated :)
The latest source is available on GitHub.
For a small fee I can help you implement the script in your project. Missing any features? I can build them for you