Smooth Scrollbar – Create Custom Scrollbar using Smooth Scrollbar jQuery Plugin

First, create a wrapper after the body tag and give an id for that wrapper tag ( ex:<div id=”container-smoothscroll”> ).

Then add the Smooth Scrollbar jQuery on the footer ( You will find the smooth scrollbar cdn file URL here: https://cdnjs.com/libraries/smooth-scrollbar ).

After that, you need to add the below js code on your JS file:

jQuery(document).ready(function($) {
	siteInit.smoothScrollbar();
});

var siteInit = {

	smoothScrollbar: function() {
	
		var elName = '#container-smoothscroll';
		var $el = jQuery(elName);
		
		if ($el.length == 0) {
			return;
		}
		
		jQuery('body').addClass('has-smooth-scroll');

		var Scrollbar = window.Scrollbar;
		Scrollbar.init(document.querySelector(elName), {
			renderByPixels: true,
			damping: 0.1,
			thumbMinSize: 0,
			alwaysShowTracks: false,
			continuousScrolling: true,
			overscrollEffect: false
		});
		
	},
};

Finally, you need to add the below styles to your CSS file:

body.has-smooth-scroll {
    overflow: hidden;
}
body.has-smooth-scroll #container-smoothscroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}