Global options

To customize the scrollbars across the app, you can use the NG_SCROLLBAR_OPTIONS token. Here is an example:

import { ApplicationConfig } from '@angular/core';
import { NG_SCROLLBAR_OPTIONS } from 'ngx-scrollbar';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: NG_SCROLLBAR_OPTIONS,
      useValue: {
        visibility: 'hover',
        appearance: 'compact'
      }
    }
  ]
};

NgScrollbarOptions API

Name	Default value	Description
track	all	Directions to track horizontal, vertical, all.
position	native	Invert scrollbar position native,invertX,invertY, invertAll.
visibility	native	Scrollbar visibility native, hover, always.
appearance	standard	Scrollbar appearance standard, compact.
trackClass	null	Add a class to scrollbar track elements.
thumbClass	null	Add a class to scrollbar thumbnail elements.
trackClickDuration	50	The smooth scroll step duration when a scrollbar is clicked.
minThumbSize	20	The minimum scrollbar thumb size in px.
sensorThrottleTime	0	The throttle time used for detecting changes size changes.
disableSensor	false	Whether ResizeObserver is disabled.
disableInteraction	false	Disables scrollbar interaction like dragging thumb and jumping by track click.
scrollTimelinePolyfill	link to script	Path to scroll timeline polyfill script.