Customizable Scrollbar Directive for Angular

ngx-slimscroll is a customizable slider directive for Angular2+. Make the slider look the same in any browser and any operating system.

angular material custom scrollbar, ngx scrollbar, ngx perfect scrollbar, angular scrollbar example, ng scrollbar is not a known element, ng scrollbar horizontal

How to make use of it:

Installation:

yarn add ngx-slimscroll # or npm install ngx-slimscroll

Usage

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgSlimScrollModule, SLIMSCROLL_DEFAULTS } from 'ngx-slimscroll';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    NgSlimScrollModule
  ],
  providers: [
    // OPTIONAL : provide default global settings which will be merge with component options.
    {
      provide: SLIMSCROLL_DEFAULTS,
      useValue: {
        alwaysVisible : false
      } as ISlimScrollOptions
    },
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

// app.component.ts
import { AppComponent, OnInit, EventEmitter } from '@angular/core';
import { SlimScrollOptions, SlimScrollEvent } from 'ngx-slimscroll';

@Component({
  selector: 'app-root',
  template: `<div slimScroll [options]="opts" [scrollEvents]="scrollEvents"></div>`
})
export class AppComponent implements OnInit {
  opts: SlimScrollOptions;
  scrollEvents: EventEmitter<SlimScrollEvent>;

  ngOnInit() {
    this.scrollEvents = new EventEmitter<SlimScrollEvent>();
    this.opts = new SlimScrollOptions({
      position?: 'left' | 'right';
      barBackground?: string; // #C9C9C9
      barOpacity?: string; // 0.8
      barWidth?: string; // 10
      barBorderRadius?: string; // 20
      barMargin?: string; // 0
      gridBackground?: string; // #D9D9D9
      gridOpacity?: string; // 1
      gridWidth?: string; // 2
      gridBorderRadius?: string; // 20
      gridMargin?: string; // 0
      alwaysVisible?: boolean; // true
      visibleTimeout?: number; // 1000
      scrollSensitivity?: number; // 1
      alwaysPreventDefaultScroll?: boolean; // true
    });

    this.play();
  }

  play(): void {
    let event = null;

    Promise.resolve()
      .then(() => this.timeout(3000))
      .then(() => {
        event = new SlimScrollEvent({
          type: 'scrollToBottom',
          duration: 2000,
          easing: 'inOutQuad'
        });

        this.scrollEvents.emit(event);
      })
      .then(() => this.timeout(3000))
      .then(() => {
        event = new SlimScrollEvent({
          type: 'scrollToTop',
          duration: 3000,
          easing: 'outCubic'
        });

        this.scrollEvents.emit(event);
      })
      .then(() => this.timeout(4000))
      .then(() => {
        event = new SlimScrollEvent({
          type: 'scrollToPercent',
          percent: 80,
          duration: 1000,
          easing: 'linear'
        });

        this.scrollEvents.emit(event);
      })
      .then(() => this.timeout(2000))
      .then(() => {
        event = new SlimScrollEvent({
          type: 'scrollTo',
          y: 200,
          duration: 4000,
          easing: 'inOutQuint'
        });

        this.scrollEvents.emit(event);
      });
  }

  timeout(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(() => resolve(), ms));
  }
}

// app.component.html
<div class="scroll-window" slimScroll [options]="opts" [scrollEvents]="scrollEvents">
  <p>Long content</p>
</div>

Description:

position: The position of the scroll bar (default: right).
barBackground: The background color of the scroll bar (default: #343a40).
barOpacity: Defines the opacity of the scroll bar (default: 1).
barWidth: Customize the width of the scroll bar (default: 12 px).
barBorderRadius: The border radius of the scroll bar (default: 5 px).
barMargin: The margin of the scroll bar. Supports the CSS-Style spelling (default: 1px 0).
gridBackground: The background color of the grid (the line on which the scroll bar is arranged; default: #adb5bd).
gridOpacity: The opacity of the grid (default: 1).
gridWidth: The width of the grid (default: 8 px).
gridBorderRadius: The border radius of the grid (default: 10 px).
gridMargin: The margin of the grid. Supports the CSS-Style spelling (default: 1px 2px).
alwaysVisible: If this option is enabled the scroll bar is displayed permanently, otherwise it will be faded out after the visible timeout (default: true).
visibleTimeout: Represents the time the scroll bar is shown (default: 1000 ms). Hint: It is necessary to set the option alwaysVisible to false.
alwaysPreventDefaultScroll: Disable this flag to forward the scroll event if the top or bottom of the slim scroll container is reached (default: true)