Home

Angular Custom Scrollbar v5

Custom overlay-scrollbars with native scrolling mechanism for Angular.

Installation

NPM

npm i ngx-scrollbar @angular/cdk @juggle/resize-observer

Usage

Import NgScrollbarModule in your module

import { NgScrollbarModule } from 'ngx-scrollbar';

@NgModule({
  imports: [
    NgScrollbarModule
  ]
})

In your template

<ng-scrollbar>
  <!-- content -->
</ng-scrollbar>

Here is a stackblitz

Options

Name	Default value	Description
[track]	vertical	Directions to track horizontal, vertical, all
[position]	native	Invert scrollbar position native,invertX,invertY, invertAll
[visibility]	native	Invert Vertical scrollbar position native, hover, always
[appearance]	compact	Scrollbar appearance standard, compact.
[viewClass]	null	Add custom class to the view.
[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.
[thumbDragDisabled]	false	A flag used to enable/disable the scrollbar thumb dragged event.
[trackClickDisabled]	false	A flag used to enable/disable the scrollbar track clicked event.
[sensorDebounce]	0	Debounce interval for detecting changes via ResizeObserver.
[sensorDisabled]	false	Whether ResizeObserver is disabled.
(updated)	-	Output that emits when the scrollbar component is updated.