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.