Skip to content
Murhaf Sousli edited this page Nov 26, 2019 · 27 revisions

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>
  <!-- content -->
</ng-scrollbar>

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.
(updated) - Output that emits when the scrollbar component is updated.