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;
});
});
Constructor
tinyscrollbar
(
options
)
|
Properties
| _defaults | Object private |
Default: defaults |
| _name | String private final |
Default: 'tinyscrollbar' |
| contentPosition | Number |
The position of the content relative to the viewport. |
| contentRatio | Number |
The ratio of the content size relative to the viewport size. |
| contentSize | Number |
The height or width of the content. |
| hasContentToSroll | Boolean |
Will be true if there is content to scroll. |
| options | Object |
The options of the carousel extend with the defaults. |
| thumbPosition | Number |
The position of the thumb relative to the track. |
| thumbSize | Number |
The height or width of the thumb. |
| trackRatio | Number |
The size of the track relative to the size of the content. |
| trackSize | Number |
The height or width of the content. |
| viewportSize | Number |
The height or width of the viewport. |
Methods
|
_drag
()
|
|
_end
()
|
|
_initialize
()
|
|
_isAtBegin
()
|
|
_isAtEnd
()
|
|
_setCss
()
|
|
_setEvents
()
|
|
_start
()
|
|
_wheel
()
|
|
update
(
scrollTo
)
You can use the update method to adjust the scrollbar to new content or to move the scrollbar to a certain point.
|
Events
| move |
The move event will trigger when the carousel slides to a new slide. |
Usage
$(document).ready(function()
{
// Initialize a scrollbar like this.
//
var $box = $('#box');
$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.