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 a jQuery plugin. The jQuery plugin does not need any other external libraries 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.
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 function 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
- Source is on GitHub
Examples
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 });
});
Update with tiny text
Update with middle text
Update with large text
Update with middle text relative to the current text.
Update with large text relative to the current text.
Update with middle text and goto bottom.
Update with large text and goto bottom.
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;
});
});
FAQ
- The thumb is slightly larger then the background image this is for easier scrolling on mobile devices.
- 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.
Initialize options
A list of all the available options and there default value
- axis: 'y' -- Vertical or horizontal scroller? 'x' or 'y'.
- wheelSpeed: 40 -- How many pixels must the mouswheel scrolls at a time.
- wheel: true -- Enable or disable the mousewheel.
- wheelLock: true -- toggle what todo when there is no more content left to scroll. When true it will do nothing. When false it will continue with scrolling the window.
- trackSize: false -- Set the size of the scrollbar to auto(false) or a fixed number.
- thumbSize: false -- Set the size of the thumb to auto(false) or a fixed number.
- scrollInvert: false -- Inverts the direction of scrolling.
Properties
$(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..
});
- contentPosition -- Position of the content.
- viewportSize -- Size of the viewport elment.
- contentRatio -- Content size to viewport size ratio.
- trackSize -- Size of the scrollbar track.
- trackRatio -- Track size to thumb size ratio.
- thumbSize -- Size of the scrollbar thumb.
- thumbPosition -- Position of the thumb
Methods
- update -- You can use the update method to adjust the scrollbar to new content or to move the scrollbar to a certain point. It takes 1 parameter a number in pixels or the values "relative" or "bottom". If you dont specify a paramater it will default to top.
Events
$(document).ready(function()
{
var $box = $('#box');
var box = $box.tinyscrollbar();
$box.bind("move", function()
{
console.log("do something on every move");
});
});
- move -- The move event will trigger on every drag or scroll.