What is it?
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 flavours as a vanilla Javascript microlib and as a jQuery plugin.
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.
Features
- Completely rewritten!
- IOS and Android support.
- Available as a jQuery plugin and as a vanilla Javascript microlib.
- AMD, Node, requirejs and commonjs support.
- Can scroll vertical or horizontal
- Supports scrolling by wheel, thumb, track or touch.
- It has a update method so it can handle (async) content changes.
- Size of the track and thumb can be set to auto or a fixed number
- Easy customizable
- Supports normal scrolling and mobile style invert scrolling.
- Examples can be seen on this page, by downloading the zip or here
- Lightweight, small and clean code.
- Source is on GitHub
Examples
The examples below are all for the jQuery Plugin. You can find some more (advanced and simple) examples 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;
});
});
The generated API docs will be included here.
Usage
$(document).ready(function()
{
// Initialize a scrollbar like this.
//
$('#box').tinyscrollbar();
// Try this to get access to the actual scrollbar instance.
//
var box = $('#box').data("plugin_tinyscrollbar");
// Now you have access to all the methods and properties.
//
// box.update();
// console.log(box.contentPosition);
//
// etc..
// You can bind to the move event like this.
//
$box.bind("move", function()
{
console.log("do something on every move.");
});
});
FAQ
- When you seem to be missing part of the content. Please make sure all the images have a height and width defined.
- Use the update method on content changes! It's your friend ;)
- If your scrollbar + content is on display: none; at page load. Use the update method to enable the scrollbar when its content is visible again.