Custom scroll using Jquery

Custom scroll implementation using mcustomscrollbar

Mcustomscrollbar is a jquery plugin. We will see the implementation steps below.

Step 1:
Include mcustomscrollbar CSS file in head section as below.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" />

Step 2:

Inlcude Jquery library and mcustomscrollbar JS files in head section.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

Step 3:

Call the following function with proper selector name.


(function($){
        $(window).load(function(){
            $(".scroll-section").mCustomScrollbar();
        });
 })(jQuery);

Note: “.scroll-section” is the class name of content section which we have to trigger the custom scroll.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *