Perfect Scrollbar causing issue with nested scrolling

[vijai1996]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When there is a nested scroll in a page container (say, a div with fixed height) and perfect scrollbar initialized on the div, smooth scroll to be working. i.e, when the fixed height div reaches its end of scroll area, the scroll to be passed on to the parent view

Current Behavior

1. If the fixed height div is not initialized with perfect scrollbar, the div is not scrollable at all.
2. If the fixed height div is initialized with perfect scrollbar, scroll works on fixed height but when it reaches the end of scrollable area, the scroll isn't passed on to parent scroll. a.k.a smooth scroll does not work

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Create a container with scrollable content
2. add a div inside the container with fixed height and fill it with enough content so scroll bar appears
3. Try scrolling the fixed div container with and without perfect scrollbar initialized

Context

• Device: Desktop, Laptop
• Operating System: Windows (Perfectscroll bar seem to be initialized on windows only)
• Browser and Version: Chrome Version 80.0.3987.163

[groovemen]

Hello @vijai1996,

Thank you for using our products, you have to change in the initialization to prevent the parent from scrolling. Here you can find an issue like yours and also a solution.
In case you have to update the plugin, you can download the latest version of perfectScrollbar from here: https://github.com/mdbootstrap/perfect-scrollbar. Just keep in mind to update the CSS file and also don't forget to change the initialization, it will be something like this:

(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');
  }
})();

plus the solution that you can find in the link from above.
Hope that information helps you. Please let us know if we can help you with anything else.

All the best,
Stefan