I know there is a similar question exist on stackoverflow but that won't help me to resolve my issue, so please don't mark it duplicate. Here is that similar question: NiceScroll - Leaving Original Scrollbar Intact
I was using niceScroll 3.6.x previously but that is not supported with mobile browsers like on android chrome i was not able to scroll my content. so I dig into the issue and get the solution, i just need to update the plugin library to 3.7.x and right now I'm on latest 3.7.6. After doing this update the chrome or mobile browser issues has been resolved but a new problem came which is worse. the scrollbar/rail which are there on the UI will not removed after ajax call or UI layout change, resulted it showing scrollbar on the UI at many places. See the attached image below:
I know one solution, to remove all the scrollbar manually with below code,
$("div[id^='ascrail']").remove();
but that will remove all the scrollbar, and on my page I have around 3 or 4 different niceScroll content section, not just one.
Also one more thing which I noticed, in one of my scrolling content there is an ajax call and the content is automatically change, after ajax call I reinitialize the nicescroll and every time on the scrolling bar it drop the last scroller shadow. See below image:
