After facing severe performance problems when using perfect-scrollbar and ngx-perfect-scrollbar with Angular 2 in IE11, I had to make the difficult decision to move away from them. With a large project underway and numerous components being initialized simultaneously, maintaining smooth and responsive page performance was crucial (especially with sensitive D3 charts).
My solution was to choose simplebar for its utilization of native scroll functionality, which greatly improved performance. However, I encountered a major issue where both the simplebar and browser's native scrollbar appeared simultaneously upon initializing an instance of the scrollbar. To address this, I implemented the following CSS snippet:
::-webkit-scrollbar { /* for Mac OS X support */
width: 0;
}
Unfortunately, this workaround did not work in Internet Explorer 11, where the scrollbar remained visible. This poses a significant problem as IE11 is essential for my client organization. Despite thorough inspection of the CSS styles, the issue persists. Disabling simplebar removes all scrollbars, but that is not a viable solution for me.