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": ">"}'>

  ...

</div>

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.

$('.box').asScrollable();

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:

2017-10-30

• Release v0.4.10

2017-09-11

• Release v0.4.9

2016-12-27

• Release v0.4.6

2016-10-18

• Release v0.4.5

2016-08-12

• ES5 --> ES6

v0.3.1 (2015-06-15)

• fix content height issue

2015-04-05

• update scrollbar

---

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