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,
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.
.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-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(); });
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
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
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More