Skip to content

Performance tweak

Murhaf Sousli edited this page Nov 26, 2019 · 7 revisions

By default, the scroll event is used to do the calculation and renders the custom scrollbars.

You should tweak the scroll event when:

  • It is not performing well on low-end devices.
  • You have a complex design where every framerate is needed to keep your app performant.

Usage

You can throttle the scroll event using the scrollAuditTime option, 20 millisecond seems to be a reasonable value.

Example:

Set the option [scrollAuditTime] for a specific scrollbar component.

<ng-scrollbar [scrollAuditTime]="20">
  <!-- ...content... -->
</ng-scrollbar>

Example:

Set the option for all custom scrollbars using the global options.

import { NgScrollbarModule, NG_SCROLLBAR_OPTIONS } from 'ngx-scrollbar';

@NgModule({
  imports: [
    NgScrollbarModule
  ],
  providers: [
    { 
       provide: NG_SCROLLBAR_OPTIONS,
       useValue: {
          scrollAuditTime: 20
       }
    }
  ]
})

This option is available in ngx-scrollbar >= v7.1.0