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

<!-- By default, height should be set on the component manually -->
<ng-scrollbar style="height: 300px">
  <!-- ... -->
</ng-scrollbar>

<!-- Automatically set the height to fit the content -->
<ng-scrollbar autoHeightDisabled="false">
  <!-- ... -->
</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.

The following are the available inputs and outputs of <ng-scrollbar>

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.