Categories: jquery Plugin

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,

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.

Related Post
<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();
});

Recent Posts

Configure and Retrieve S3 Information Using Laravel PHP-AWS-SDK

This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More

3 months ago

What is the Purpose of php_eol in PHP?

in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More

9 months ago

Laravel Table Relationship Methods With Example

This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More

9 months ago

Exploring the Power of Laravel Eloquent Join?

We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More

9 months ago

Quick and Easy Installation of Laravel Valet

in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More

10 months ago

What is Laravel Soft Delete and How Does it Work?

I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More

10 months ago

Categories