This plugin aims to create a lightweight custom scrollbar.

Oh no!!! Another scrollbar plugin?

"Why did you...?" is what you're thinking?

Let me explain:

I've seen quite a few plugins that try to replicate the scrolling and the scrollbars, yet I haven't found one that is really lightweight, offers triggers (up-down-arrows) and does NOT use the "mousewheel"-plugin.

Most implementations do not translate the native scrolling but rather use the mousewheel events.

In my opinion this is a bad thing so I created this simple plugin that simply "hides" the original scrollbar and adds a second one to replace it. This way the scrollable div will still scroll natively but pass some actions to the new scrollbar.

Interactions on the scrollbar itself will be translated to the scrollable div.

The scrollbar itself only listens to the scroll event.


  • theme: any theme name (string)
  • events:
    • created
    • scrollstarted
    • scrollended
    • thumbclick
    • destroyed
    • ==>
      • call functions when event occurs
      • access event or ui


  • destroy
  • init


  • create
  • scrollstart
  • scrollend
  • thumbclick
  • destroy

You can listen to these events:

$('.my-selector').on('create', function(){
    // element has been created
$('.my-selector').on('scrollend', function(){
    // scrolling has stopped




  theme: 'my-custom-theme',
  created: function(e, ui){
        // something
  scrollstarted: function(e, ui){
    // something
  scrollended: function(e, ui){
    // something
  thumbclicked: function(e, ui){
    // something



Version 2

This is the 2nd version please look for the v1.x branch if you are looking for the old version. This version has a lot cleaner code and can be minified with the goolge-closure-compiler with ADVANCED_OPTIMIZATIONS.

The elements used for the scrollbars are copied from the '-webkit-' scrollbars

(this allows us to do some very detailed styling):

  • scrollbar
  • scrollbar-button
  • scrollbar-track
  • scrollbar-track-piece
  • scrollbar-thumb

What to expect

  • Vertical scrollbar
  • Horizontal scrollbar
  • multiple instances on one page
  • interactive scrollbar
  • full control of the styling via CSS
  • events for created, scrollstart, scrollend, thumbclick, destroyed
  • optional arrows (click-triggers)
  • destroy method


  • add more methods and events
  • write a documetation
  • allow nested scrollbars