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.

Magnis dis parturient montes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.

Vivamus sed tellus quis orci dignissim scelerisque nec vitae est. Duis et elit ipsum. Aliquam pharetra auctor felis tempus tempor. Vivamus turpis dui, sollicitudin eget rhoncus in, luctus vel felis. Curabitur ultricies dictum justo at luctus. Nullam et quam et massa eleifend sollicitudin. Nulla mauris purus, sagittis id egestas eu, pellentesque et mi. Donec bibendum cursus nisi eget consequat. Nunc sit amet commodo metus. Integer consectetur lacus ac libero adipiscing ut tristique est viverra. Maecenas quam nibh, molestie nec pretium interdum, porta vitae magna. Maecenas at ligula eget neque imperdiet faucibus malesuada sed ipsum. Nulla auctor ligula sed nisl adipiscing vulputate. Curabitur ut ligula sed velit pharetra fringilla. Cras eu luctus est. Aliquam ac urna dui, eu rhoncus nibh. Nam id leo nisi, vel viverra nunc. Duis egestas pellentesque lectus, a placerat dolor egestas in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae ipsum non est iaculis suscipit.

Adipiscing risus

Quisque vel felis ligula. Cras viverra sapien auctor ante porta a tincidunt quam pulvinar. Nunc facilisis, enim id volutpat sodales, leo ipsum accumsan diam, eu adipiscing risus nisi eu quam. Ut in tortor vitae elit condimentum posuere vel et erat. Duis at fringilla dolor. Vivamus sem tellus, porttitor non imperdiet et, rutrum id nisl. Nunc semper facilisis porta. Curabitur ornare metus nec sapien molestie in mattis lorem ullamcorper. Ut congue, purus ac suscipit suscipit, magna diam sodales metus, tincidunt imperdiet diam odio non diam. Ut mollis lobortis vulputate. Nam tortor tortor, dictum sit amet porttitor sit amet, faucibus eu sem. Curabitur aliquam nisl sed est semper a fringilla velit porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in sapien id nulla volutpat sodales ac bibendum magna. Cras sollicitudin, massa at sodales sodales, lacus tortor vestibulum massa, eu consequat dui nulla et ipsum.

Aliquam accumsan aliquam urna, id vulputate ante posuere eu. Nullam pretium convallis tincidunt. Duis vitae odio arcu, ut fringilla enim. Nam ante eros, vestibulum sit amet rhoncus et, vehicula quis tellus. Curabitur sed iaculis odio. Praesent vitae ligula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis, nunc non laoreet mollis, neque est mattis nisl, nec accumsan velit nunc ut arcu. Donec quis est mauris, eu auctor nulla. Fusce leo diam, tempus a varius sit amet, auctor ac metus. Nam turpis nulla, fermentum in rhoncus et, auctor id sem. Aliquam id libero eu neque elementum lobortis nec et odio.


$(document).ready(function()
{
    $("#scrollbar1").tinyscrollbar();
});
                
image 2 image 2 image 2 image 2 image 2 image 2

$(document).ready(function()
{
    // The axis option is for setting the dimension in
    // which the scrollbar should operate.
    //
    $("#scrollbar2").tinyscrollbar({ axis: "x"});
});
                

Magnis dis parturient montes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.

Vivamus sed tellus quis orci dignissim scelerisque nec vitae est. Duis et elit ipsum. Aliquam pharetra auctor felis tempus tempor. Vivamus turpis dui, sollicitudin eget rhoncus in, luctus vel felis. Curabitur ultricies dictum justo at luctus. Nullam et quam et massa eleifend sollicitudin. Nulla mauris purus, sagittis id egestas eu, pellentesque et mi. Donec bibendum cursus nisi eget consequat. Nunc sit amet commodo metus. Integer consectetur lacus ac libero adipiscing ut tristique est viverra. Maecenas quam nibh, molestie nec pretium interdum, porta vitae magna. Maecenas at ligula eget neque imperdiet faucibus malesuada sed ipsum. Nulla auctor ligula sed nisl adipiscing vulputate. Curabitur ut ligula sed velit pharetra fringilla. Cras eu luctus est. Aliquam ac urna dui, eu rhoncus nibh. Nam id leo nisi, vel viverra nunc. Duis egestas pellentesque lectus, a placerat dolor egestas in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae ipsum non est iaculis suscipit.

Adipiscing risus

Quisque vel felis ligula. Cras viverra sapien auctor ante porta a tincidunt quam pulvinar. Nunc facilisis, enim id volutpat sodales, leo ipsum accumsan diam, eu adipiscing risus nisi eu quam. Ut in tortor vitae elit condimentum posuere vel et erat. Duis at fringilla dolor. Vivamus sem tellus, porttitor non imperdiet et, rutrum id nisl. Nunc semper facilisis porta. Curabitur ornare metus nec sapien molestie in mattis lorem ullamcorper. Ut congue, purus ac suscipit suscipit, magna diam sodales metus, tincidunt imperdiet diam odio non diam. Ut mollis lobortis vulputate. Nam tortor tortor, dictum sit amet porttitor sit amet, faucibus eu sem. Curabitur aliquam nisl sed est semper a fringilla velit porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in sapien id nulla volutpat sodales ac bibendum magna. Cras sollicitudin, massa at sodales sodales, lacus tortor vestibulum massa, eu consequat dui nulla et ipsum.

Aliquam accumsan aliquam urna, id vulputate ante posuere eu. Nullam pretium convallis tincidunt. Duis vitae odio arcu, ut fringilla enim. Nam ante eros, vestibulum sit amet rhoncus et, vehicula quis tellus. Curabitur sed iaculis odio. Praesent vitae ligula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis, nunc non laoreet mollis, neque est mattis nisl, nec accumsan velit nunc ut arcu. Donec quis est mauris, eu auctor nulla. Fusce leo diam, tempus a varius sit amet, auctor ac metus. Nam turpis nulla, fermentum in rhoncus et, auctor id sem. Aliquam id libero eu neque elementum lobortis nec et odio.


$(document).ready(function()
{
    // The size of the scrollbar can be set to a
    // fixed number with the size option.
    //
    $("#scrollbar3").tinyscrollbar({ trackSize: 100 });
});
                

Magnis dis parturient montes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.

Vivamus sed tellus quis orci dignissim scelerisque nec vitae est. Duis et elit ipsum. Aliquam pharetra auctor felis tempus tempor. Vivamus turpis dui, sollicitudin eget rhoncus in, luctus vel felis. Curabitur ultricies dictum justo at luctus. Nullam et quam et massa eleifend sollicitudin. Nulla mauris purus, sagittis id egestas eu, pellentesque et mi. Donec bibendum cursus nisi eget consequat. Nunc sit amet commodo metus. Integer consectetur lacus ac libero adipiscing ut tristique est viverra. Maecenas quam nibh, molestie nec pretium interdum, porta vitae magna. Maecenas at ligula eget neque imperdiet faucibus malesuada sed ipsum. Nulla auctor ligula sed nisl adipiscing vulputate. Curabitur ut ligula sed velit pharetra fringilla. Cras eu luctus est. Aliquam ac urna dui, eu rhoncus nibh. Nam id leo nisi, vel viverra nunc. Duis egestas pellentesque lectus, a placerat dolor egestas in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae ipsum non est iaculis suscipit.

Adipiscing risus

Quisque vel felis ligula. Cras viverra sapien auctor ante porta a tincidunt quam pulvinar. Nunc facilisis, enim id volutpat sodales, leo ipsum accumsan diam, eu adipiscing risus nisi eu quam. Ut in tortor vitae elit condimentum posuere vel et erat. Duis at fringilla dolor. Vivamus sem tellus, porttitor non imperdiet et, rutrum id nisl. Nunc semper facilisis porta. Curabitur ornare metus nec sapien molestie in mattis lorem ullamcorper. Ut congue, purus ac suscipit suscipit, magna diam sodales metus, tincidunt imperdiet diam odio non diam. Ut mollis lobortis vulputate. Nam tortor tortor, dictum sit amet porttitor sit amet, faucibus eu sem. Curabitur aliquam nisl sed est semper a fringilla velit porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in sapien id nulla volutpat sodales ac bibendum magna. Cras sollicitudin, massa at sodales sodales, lacus tortor vestibulum massa, eu consequat dui nulla et ipsum.

Aliquam accumsan aliquam urna, id vulputate ante posuere eu. Nullam pretium convallis tincidunt. Duis vitae odio arcu, ut fringilla enim. Nam ante eros, vestibulum sit amet rhoncus et, vehicula quis tellus. Curabitur sed iaculis odio. Praesent vitae ligula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis, nunc non laoreet mollis, neque est mattis nisl, nec accumsan velit nunc ut arcu. Donec quis est mauris, eu auctor nulla. Fusce leo diam, tempus a varius sit amet, auctor ac metus. Nam turpis nulla, fermentum in rhoncus et, auctor id sem. Aliquam id libero eu neque elementum lobortis nec et odio.


$(document).ready(function()
{
    // The size of the scrollbar thumb can be set to a
    // fixed number with the size option.
    //
    $("#scrollbar4").tinyscrollbar({ thumbSize: 15 });
});
                

Aeolus

Aeolus was the ruler of the winds in Greek mythology. In fact this name was shared by three mythic characters. These three personages are often difficult to tell apart, and even the ancient mythographers appear to have been perplexed about which Aeolus was which. Diodorus Siculus made an attempt to define each of these three (although it is clear he also became muddled), and his opinion is followed here.[2] Briefly, the first Aeolus was a son of Hellen and eponymous founder of the Aeolian race; the second was a son of Poseidon, who led a colony to islands in the Tyrrhenian Sea; and the third Aeolus was a son of Hippotes who is mentioned in Odyssey book 10 as Keeper of the Winds who gives Odysseus a tightly closed bag full of the captured winds so he could sail easily home to Ithaca on the gentle West Wind. All three men named Aeolus appear to be connected genealogically, although the precise relationship, especially regarding the second and third Aeolus, is often ambiguous.

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.

Heracles

He was the greatest of the Greek heroes, a paragon of masculinity, the ancestor of royal clans who claimed to be Heracleidae and a champion of the Olympian order against chthonic monsters.

Theseus

Theseus was the mythical founder-king of Athens, son of Aethra, and fathered by Aegeus and Poseidon, both of whom Aethra lay with in one night.

Theseus was a founder-hero, like Perseus, Cadmus or Heracles, all of whom battled and overcame foes that were identified with an archaic religious and social order.[1] As Heracles was the Dorian hero, Theseus was the Ionian founding hero, considered by Athenians as their own great reformer. His name comes from the same root as thesmos, Greek for institution.

He was responsible for the synoikismos ("dwelling together") the political unification of Attica under Athens, represented emblematically in his journey of labours, subduing highly localized ogres and monstrous beasts. Because he was the unifying king, Theseus built and occupied a palace on the fortress of the Acropolis that may have been similar to the palace that was excavated in Mycenae. Pausanias reports that after the synoikismos, Theseus established a cult of Aphrodite Pandemos ("Aphrodite of all the People") and Peitho on the southern slope of the Acropolis.

Aeacus

Aeacus was a mythological king of the island of Aegina in the Saronic Gulf. He was son of Zeus and Aegina, a daughter of the river-god Asopus.[1] He was born in the island of Oenone or Oenopia, to which Aegina had been carried by Zeus to secure her from the anger of her parents, and whence this island was afterwards called Aegina.[2][3][4][5][6] According to some accounts Aeacus was a son of Zeus and Europa. Some traditions related that at the time when Aeacus was born, Aegina was not yet inhabited, and that Zeus changed the ants of the island into men (Myrmidons) over whom Aeacus ruled, or that he made men grow up out of the earth.[2][7][8] Ovid, on the other hand, supposes that the island was not uninhabited at the time of the birth of Aeacus, and states that, in the reign of Aeacus, Hera, jealous of Aegina, ravaged the island bearing the name of the latter by sending a plague or a fearful dragon into it, by which nearly all its inhabitants were carried off, and that Zeus restored the population by changing the ants into men.[9][10][11] These legends are nothing but a mythical account of the colonization of Aegina, which seems to have been originally inhabited by Pelasgians, and afterwards received colonists from Phthiotis, the seat of the Myrmidons, and from Phlius on the Asopus. Aeacus while he reigned in Aegina was renowned in all Greece for his justice and piety, and was frequently called upon to settle disputes not only among men, but even among the gods themselves.[12][13] He was such a favourite with the latter, that, when Greece was visited by a drought in consequence of a murder which had been committed, the oracle of Delphi declared that the calamity would not cease unless Aeacus prayed to the gods that it might.[2][14] Aeacus prayed, and it ceased in consequence. Aeacus himself showed his gratitude by erecting a temple to Zeus Panhellenius on mount Panhellenion,[15] and the Aeginetans afterwards built a sanctuary in their island called Aeaceum, which was a square place enclosed by walls of white marble. Aeacus was believed in later times to be buried under the altar in this sacred enclosure.[16]


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();

                

Odysseus

Odysseus was a legendary Greek king of Ithaca and the hero of Homer's epic poem the Odyssey. Odysseus also plays a key role in Homer's Iliad and other works in the Epic Cycle.

King of Ithaca, husband of Penelope, father of Telemachus, and son of Laertes and Anticlea, Odysseus is renowned for his guile and resourcefulness, and is hence known by the epithet Odysseus the Cunning. He is most famous for the ten eventful years he took to return home after the ten-year Trojan War and his famous Trojan Horse trick.

Relatively little is known of Odysseus's background other than that his paternal grandfather (or step-grandfather) is Arcesius, son of Cephalus and grandson of Aeolus, whilst his maternal grandfather is the thief Autolycus, son of Hermes and Chione. According to The Odyssey, his father is Laertes[1] and his mother Anticlea, although there was a non-Homeric tradition[2] that Sisyphus was his true father.[3] Odysseus is said to have a younger sister, Ctimene, who went to Same to be married and is mentioned by the swineherd Eumaeus, whom she grew up alongside, in Book XV of the Odyssey.[4] Ithaca, an island along the Ionian northwestern coastline of Greece, is one of several islands that would have comprised the realm of Odysseus's family, but the true extent of the Cephallenian realm and the actual identities of the islands named in Homer's works are unknown.

Odysseus was a legendary Greek king of Ithaca and the hero of Homer's epic poem the Odyssey. Odysseus also plays a key role in Homer's Iliad and other works in the Epic Cycle.

King of Ithaca, husband of Penelope, father of Telemachus, and son of Laertes and Anticlea, Odysseus is renowned for his guile and resourcefulness, and is hence known by the epithet Odysseus the Cunning. He is most famous for the ten eventful years he took to return home after the ten-year Trojan War and his famous Trojan Horse trick.

Relatively little is known of Odysseus's background other than that his paternal grandfather (or step-grandfather) is Arcesius, son of Cephalus and grandson of Aeolus, whilst his maternal grandfather is the thief Autolycus, son of Hermes and Chione. According to The Odyssey, his father is Laertes[1] and his mother Anticlea, although there was a non-Homeric tradition[2] that Sisyphus was his true father.[3] Odysseus is said to have a younger sister, Ctimene, who went to Same to be married and is mentioned by the swineherd Eumaeus, whom she grew up alongside, in Book XV of the Odyssey.[4] Ithaca, an island along the Ionian northwestern coastline of Greece, is one of several islands that would have comprised the realm of Odysseus's family, but the true extent of the Cephallenian realm and the actual identities of the islands named in Homer's works are unknown.

Scroll the content to 50px Scroll the content to 200px Scroll the content to 300px

$(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.