Javascript Scrollbar Solutions and PSD Layouts

Written by Kevin Liew on 26 Oct 2011
37,993 Views • Javascript

Introduction

This would be our 8th series of web user interface elements post. We're going to dig deep into scrollbar. Scrollbar can be a irritating element for most web designers mainly because it's inconsistent across different browsers, and most of the time the default browser scrollbar just doesn't look good with the design! Well, look at MacOS' scrollbar, it's blue! On different platforms and browsers the  scrollbar is different in size, design and color.

So, in this post, we're not only looking in to a list of well-designed free scrollbar PSD, we will start with 3 Javascript plugins that eliminate the above weaknesses and give you back the full control on how your design should look like. Just in case you've missed our previous awesome (yeah! AWESOME!) UI posts, you can check them out:

Javascript Scrollbar Solutions

Alright, lets start with 2 jQuery and a Mootool plugins/

  • Tiny Scrollbar Tiny scrollbar was built using jQuery library and designed to be lightweight and dynamic to provide the greatest flexibility to web designer to enhance the design of scrollbar. I've inspected the structure of the scrollbar and it's true that you will able to style it easily. It doesn't come with Top and Bottom arrow though.
    • Vertical and horizontal scrolling support
    • Work on iPhone, iPad and Android
    • Support scrolling by wheel, thumb or track
    • An update function so it can handle content changes. This is a good stuff!
    • Size of the scrollbar and thumb can be set to auto or a fixed number
    • Support anchors
  • jScrollPane jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS. From all that I've found, jScrollPane is the most robust and in the same time quite complicated to implement for those for doesn't really know Javascript. However, it comes with a lot of examples and documentations which I believe can be very helpful for beginner.
    • Vertical and horizontal scrolling support
    • Support arrow scroll (click/hover)
    • Support scrolling by wheel, touch or track
    • Work on iPhone, iPad and Android
    • It has built in function to re-initialised the scrollpane if you add dynamic content to it.
    • It has callback function/events.
    • and a whole lot more features!
  • MooScroll Pretty obvious, it's a scroller for Mootools javascript framework. MooScroll is a MooTools 1.2 class that allows you to customize how the scrollbar looks on scrollable divs. There are quite a few of people are using Mootools, so I add this as one of the scrolling solutions.
    • From what I see, it only support vertical scrolling
    • Partial support for mobile platform, it's scrollable with your finger but the scrollbar is hidden by default.
    • It has a built-in refresh() function to resize the scrollpane according to the current content size
    • Support smooth scrolling
    • Support anchors

Scrollbar UI

Now you know what you can do with the scroll bar, time to skin it up with this well-designed interface and transform the ugly into something beautiful!

That's all! We will be having similar posts in the future, so make sure you stay tuned with Queness. Sharing is caring, if you like this post, please help me to spread it :)

By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Related Articles
16 Impressive Flash-Like Javascript Animation Inspirations, Tutorials and Plugins
EasyAutocomplete - A Lightweight jQuery Autocomplete Plugin
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.