Slim Custom Scrollbar Plugin For jQuery - asScrollbar

asScrollbar is a jQuery plugin that transform any DIV elements into a scrollable area with a slim responsive scrollbar.

How to use it:

1. Load the jQuery library and the jQuery asScrollbar plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="src/jquery-asScrollbar.js"></script>

2. Include the required CSS file in the head section of the document.

<link rel="stylesheet" href="css/asScrollbar.css" type="text/css">

3. Wrap the scrollable content in a container element.

<div id="scroller">

Your long content goes here

</div>

4. Initialize the plugin with all the default settings.

$(document).ready(function($){
$('#scroller').asScrollable();
});

5. All the default settings.

$(document).ready(function($){
$('#scroller').asScrollable({
  namespace: 'asScrollbar',

  skin: null,
  handleSelector: null,
  handleTemplate: '<div class="{{handle}}"></div>',

  barClass: null,
  handleClass: null,

  disabledClass: 'is-disabled',
  draggingClass: 'is-dragging',
  hoveringClass: 'is-hovering',

  direction: 'vertical',

  barLength: null,
  handleLength: null,

  minHandleLength: 30,
  maxHandleLength: null,

  mouseDrag: true,
  touchDrag: true,
  pointerDrag: true,
  clickMove: true,
  clickMoveStep: 0.3, // 0 - 1
  mousewheel: true,
  mousewheelSpeed: 50,

  keyboard: true,

  useCssTransforms3d: true,
  useCssTransforms: true,
  useCssTransitions: true,

  duration: '500',
  easing: 'ease' // linear, ease-in, ease-out, ease-in-out
});
});

Change logs:

2017-09-11

• v0.5.7

2016-10-17

• v0.5.4

2016-08-11

• ES5 -> ES6

2015-04-05

• fix ios transition issue

2015-03-05

• v.0.3.1
• make handle transitionable

2014-12-23

• style the scrollbar with less vars

2014-10-24

• fixed direction in to function

2014-10-23

• fixed container height

v0.1.1 (2014-07-08)

• add scrollbar mousewheel function

v0.1.1 (2014-07-04)

• update.

 

---

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.