Slim Custom Scrollbar Plugin For jQuery - asScrollbar

File Size: 232 KB
Views Total: 7967
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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


4. Initialize the plugin with all the default settings.


5. All the default settings.

  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:


  • v0.5.7


  • v0.5.4


  • ES5 -> ES6


  • fix ios transition issue


  • v.0.3.1
  • make handle transitionable


  • style the scrollbar with less vars


  • fixed direction in to function


  • fixed container height

v0.1.1 (2014-07-08)

  • add scrollbar mousewheel function

v0.1.1 (2014-07-04)


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