How to add custom scrollbars to your website

by - Tuesday, April 2, 2013

A neat solution to add custom scrollbars to your website using a simple jQuery plugin

We decided to implement customisable scrollbars on our Flowers Galleries site as we wanted the content to be contained within the window and not drop below the ‘fold’.

Therefore internal scrollbars were needed to view content that was larger than the window.

Tiny Scrollbar is a plugin that helped us achieve this.

The standard browser design for a scrollable area is unattractive so we looked to use this plugin that could be styled to fit the design perfectly.

Tiny Scrollbar works exactly how a browser scrollbar does, mouse wheel rolling is supported as well as dragging on touch devices.

Both vertical and horizontal scrolling is supported with various features such as the ‘update()’ function that loads new content into the scrollable area.

I wrote a custom feature in addition to the plugin that automatically updates the dimensions of the scrollbar when the page is resized, this is currently implemented on the Flowers site.


J1

The artist landing page gives you the details about the artist. Each column is wrapped with the scrollbar. When a scrollable area is not needed, the scrollbar is hidden.


J2

The horizontal version of the scrollbar neatly holds the work image thumbnails. If the page is resized, the scrollbar width will change automatically.


J3

There are many publications within the shop section. On a touch screen device, dragging the scrollbar will reveal more items.

We'll be looking more closely at the possibilities with touch gestures and how we adapt the behaviour in future.

Send us a comment on this article