jQuery Plugin To Create Scollable Block Elements - asScrollable

File Size: 261 KB
Views Total: 4821
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Create Scollable Block Elements - asScrollable

asScrollable is a jQuery plugin that adds both horizontal and vertical scrolling with custom scrollbars to any block elements.

How to use it:

1. Import the required asScrollable.css for the scrollbar & scrollable content.

<link rel="stylesheet" href="css/asScrollable.css">

2. Create a scrollable block element and pass the plugin options via data-option attribute as follow.

<div class="box" data-options='{"direction": "vertical", "contentSelector": ">", "containerSelector": ">"}'>



3. Load jQuery library together with the jQuery MouseWheel, jQuery asScrollbar and jQuery asScrollable plugins at the bottom of the web page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
<script src="libs/jquery.asScrollbar.js"></script>
<script src="src/jquery.asScrollable.js"></script>

4. Call the plugin to make the 'box' container scrollable with a custom scrollbar.


5. You can also pass the options during initialization. The full options:

namespace: 'asScrollable',

skin: null,

contentSelector: null,
containerSelector: null,

enabledClass: 'is-enabled',
disabledClass: 'is-disabled',

draggingClass: 'is-dragging',
hoveringClass: 'is-hovering',
scrollingClass: 'is-scrolling',

// vertical, horizontal, both, auto
direction: 'vertical', 

showOnHover: true,
showOnBarHover: false,

duration: 500,

// linear, ease, ease-in, ease-out, ease-in-out
easing: 'ease-in', 

responsive: true,
throttle: 20,

// asScrollbar plugin options
scrollbar: {}

Change logs:


  • Release v0.4.10


  • Release v0.4.9


  • Release v0.4.6


  • Release v0.4.5


  • ES5 --> ES6

v0.3.1 (2015-06-15)

  • fix content height issue


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