Custom Scrollbar – A jQuery Plugin for Vertical and Horizontal Scrollbar on Element

Custom scrollbar is an awesome jQuery plugin which can be use for vertical scrollbar and horizontal scrollbar in your application. You can also use slimscroll for vertical scrollbar and horizontal scrollbar but it’s have much more features than slimscroll.
He has many features like scrolling momentum, mouse-wheel, keyboard and touch support etc.Custom Scrollbar has many inbuild method to set properties on element like you can set height of element,width of element,theme of scrollbar,axis of scrollbar and scrollbar position etc.

You can also check other recommended tutorial,

• Custom scrollbar – A jQuery plugin for vertical and horizontal Scroll
• Best awesome Slim Scroll Jquery Plugin

Simple Example of Custom Scrollbar in Your application

Step 1: We need download basic library file from Here .

Step 2: Include library files into head tag your HTML document.

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

Step 3: We need to create HTML element where you want to add custom scrollbar with mCustomScrollbar class.

<div class="mCustomScrollbar custom-css" data-mcs-theme="dark">
  <!-- your content -->
</div>

mCustomScrollbar is a custom scrollbar default class for scrollbar,You need to add mCustomScrollbar to any element you want to add custom scrollbar.You can add data-mcs-axis attribute (e.g. “x” for horizontal and “y” for vertical) and theme by data-mcs-theme.I am using custom-css css class for our custom css on element like height,width,font etc css properties.

You need to set some CSS properties for horizontal scrollbar and vertical scrollbar on HTML element where you need to add scrollbar.

• overflow : You need set overflow is auto for show scrollbar on container(HTML element).
• height/max-height : You need set height of container(HTML element) for vertical custom scrollbar.
• width/max-width : You need set width of container(HTML element) for horizontal custom scrollbar.

Custom Scrollbar CSS for horizontal scrollbar on element

.custom-css {
  max-width:200px;
  scroll:auto;
}

as per above css properties the horizontal scrollbar will display after content will exceed container width of 200px.

Custom Scrollbar CSS for Vertical scrollbar on element

.custom-css {
  max-height:200px;
  scroll:auto;
}

as per above css properties the vertical scrollbar will display after content will exceed container height of 200px.

Step 4: Finally we will call mCustomScrollbar() function on the element selector you want to add the scrollbar.

$( document ).ready(function() {
    $(".custom-css").mCustomScrollbar();
});