Tiny Scrollbar
A lightweight jQuery pluginLike my plugin? Buy me a beer :)
What is it?
Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.
Features
- iPhone, iPad, Android support!
- New in 1.8. You can now drag the content on mobile devices!
- Can scroll vertical or horizontal
- Supports scrolling by wheel, thumb, track or touch.
- It has a update function so it can handle content changes.
- Size of the scrollbar and thumb can be set to auto or a fixed number
- Easy customizable
- Supports normal scrolling and mobile style invert scrolling.
- Lightweight its only 100 lines of code. mimified the size is 2,29 kb
Need support or custom features?
Anything is possible! For a small fee i can help you implement the script in your project. Missing any features? I can build them for you!!
Examples
$('#scrollbar1').tinyscrollbar();
//The axis option is for setting the dimension in which the scrollbar should operate.
$('#scrollbar2').tinyscrollbar({ axis: 'x'});
// The size of the scrollbar can be set to a fixed number with the size option.
$('#scrollbar3').tinyscrollbar({ size: 100 });
// You can set the thumb size to a fixed number with the sizethumb option.
$('#scrollbar4').tinyscrollbar({ sizethumb: 15 });
Load new content and start scrollbar at top of page - update()
load content load content 2 load content 3Load new content and relative from the old content - update('relative')
load content 4 load content 5Load new content en goto bottom - update('bottom')
load content 6 load content 7Heracles
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]
//The update method can be used for adjusting a scrollbar to its new content.
var oScrollbar5 = $('#scrollbar5');
oScrollbar5.tinyscrollbar();
//some operation that changes the viewport content...
oScrollbar5.tinyscrollbar_update();
You can make a anchor by calling the update method and passing it a number - update( number )
anchor 50px anchor 200px anchor 300px
//You can use the update method to build a anchor.
var oScroll6 = $('#scrollbar6');
oScroll6.tinyscrollbar();
//add a click event to a button
$('#scrollbar6-anchor').click(function(){
oScroll6.tinyscrollbar_update(50);
return false;
});
How to
HTML for a basic scrollbar like example 1 ( Download TAR or Download ZIP )
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<h3>Magnis dis parturient montes</h3>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h3>Adipiscing risus </h3>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
CSS
#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
JS
Add jQuery and the tinyscrollbar js to the bottom of your head tag. After you have done that add these lines.
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
FAQ
- The thumb is slightly larger then the background image. This is for easier scrolling on mobile devices.
- When your missing part of you content in the scrollbar. Please make sure all the images have a height and width defined.
- Use the update method on content changes! Its 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.
Options
A list of all the available options and there default value
- axis: 'x' -- Vertical or horizontal scroller? 'x' or 'y'.
- wheel: 40 -- How many pixels must the mouswheel scrolls at a time.
- scroll: true -- Enable or disable the mousewheel.
- lockscroll: true -- Return scrollwheel event to browser if there is no more content.
- size: 'auto' -- Set the size of the scrollbar to auto or a fixed number.
- sizethumb: 'auto' -- Set the size of the thumb to auto or a fixed number.
- invertscroll: false -- Enable mobile invert style scrolling.
When you remove or add content to your box you can update it on the fly with the update method. You can also use it to create anchors or the enable a scrollbar that was hidden.
var oScrollbar = $('#scrollbar1');
oScrollbar.tinyscrollbar();
oScrollbar.tinyscrollbar_update();
// Posible parameters you can pass to the method are:
// tinyscrollbar_update() - default equals to 'top'
// tinyscrollbar_update('bottom') - sets scrollbar to the bottom
// tinyscrollbar_update('relative') - sets the position of the scrollbar relative to the old content when new content is passed in.
// tinyscrollbar_update( a integer ) - You can use this to move to a certain location in the content.