Bootstrap Perfect Scrollbar
“Minimalistic but perfect custom scrollbar plugin.”
!IMPORTANT Perfect Scrollbar is applied on the .main-panel
and .wrapper
so we will have a nice scrollbar that is visible only when you actually scroll. Since it is changing the overflows of the CSS it is also affecting the child elements which have a scroll so please make sure that you add the class .ps-child
to any element that should have scroll.
Initialization
(function() {
isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
if (isWindows) {
// if we are on windows OS we activate the perfectScrollbar function
if ($(".sidebar").length != 0) {
var ps = new PerfectScrollbar('.sidebar');
}
if ($(".sidebar-wrapper").length != 0) {
var ps1 = new PerfectScrollbar('.sidebar-wrapper');
}
if ($(".main-panel").length != 0) {
var ps2 = new PerfectScrollbar('.main-panel');
}
if ($(".main").length != 0) {
var ps3 = new PerfectScrollbar('main');
}
$('html').addClass('perfect-scrollbar-on');
} else {
$('html').addClass('perfect-scrollbar-off');
}
})();
Styles PRO
You will find the styles for this component in ./assets/scss/material-dashboard/plugins/_perfect-scrollbar.scss
.
Props
If you want to see more examples and properties please check the Official Github Repository.