customScrollBar

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.

Options

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

Methods

• destroy
• init

Events

• 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
});

Usage:

$('.my-selector').customScrollBar();

$('.my-selector').customScrollBar('destroy');

$('.my-selector').customScrollBar({
  theme: 'my-custom-theme',
  created: function(e, ui){
        // ...do something
  },
  scrollstarted: function(e, ui){
    // ...do something
  },
  scrollended: function(e, ui){
    // ...do something
  },
  thumbclicked: function(e, ui){
    // ...do something
  }
});

Examples:

http://pixelass.github.io/customScrollBar/

Alpha

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

ToDo

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