Usage

Installation

Install with npm

npm i ngx-scrollbar @angular/cdk

Usage

Import NgScrollbarModule in your module

import { NgScrollbarModule } from 'ngx-scrollbar';

@NgModule({
  imports: [
    NgScrollbarModule
  ]
})

In your template

<ng-scrollbar style="height: 300px">
  <!-- content -->
</ng-scrollbar>

• Try it online using this stackblitz example

Options

You can set global options for all scrollbars across your app, see the global options chapter.

Here is ng-scrollbar component inputs and outputs table:

Name	Default value	Description
[track]	vertical	Directions to track horizontal, vertical, all
[position]	native	Invert scrollbar position native,invertX,invertY, invertAll
[visibility]	native	Scrollbar visibility native, hover, always
[appearance]	compact	Scrollbar appearance standard, compact.
[viewClass]	null	Add custom class to the viewport.
[trackClass]	null	Add custom class to scrollbars' tracks.
[thumbClass]	null	Add custom class to scrollbars' thumbnails.
[disabled]	false	Disable the custom scrollbars and use the native ones instead.
[trackClickScrollDuration]	300	The smooth scroll duration when a scrollbar is clicked.
[minThumbSize]	20	The minimum scrollbar thumb size in px.
[scrollAuditTime]	0	Throttle scroll event in ms.
[sensorDebounce]	0	Debounce interval for detecting changes via ResizeObserver.
[sensorDisabled]	false	Whether ResizeObserver is disabled.
[pointerEventsMethod]	viewport	The method used to detect scrollbar pointer-events, read more.
[pointerEventsDisabled]	false	Enable/disable the scrollbar track clicked and thumb dragged events.
[autoHeightDisabled]	true	Whether to set component height to content height.
[autoWidthDisabled]	true	Whether to set component width to content width.
(updated)	-	Output that emits when the scrollbar component is updated.