ngx-scrollbar

Ngx-scrollbar is a customizable and lightweight scrollbar based on native browser scrollbar for Angular.

Setup

Installation

Install ngx-scrollbar library from npm

npm install @synapsium/ngx-scrollbar --save

Style

Import ngx-scrollbar style into your project styles.css

@import '../node_modules/@synapsium/ngx-scrollbar/styles/styles.scss';

Module usage

Add ScrollbarModule to module

import { ScrollbarModule, ScrollbarConfig, SCROLLBAR_CONFIG } from '@synapsium/ngx-scrollbar';

const DEFAULT_SCROLLBAR_CONFIG: ScrollbarConfig = {
  autoHide: true,
  trackbarMinThickness: 17,
  trackbarMaxThickness: 20,
  barMinSize: 20
};

@NgModule({
  ...
  imports: [
    ...
    ScrollbarModule
  ],
  providers: [
    {
      provide: SCROLLBAR_CONFIG,
      useValue: DEFAULT_SCROLLBAR_CONFIG
    }
  ]
})

How to use

Add scrollbar directive to the container

<div scrollbar 
    [auto-hide]="false">
    <!-- Your content here... -->
</div>