Ngx-CustomScrollbars

Pure ngx scrollbars without dependencies to jQuery or other scroll librarys, to bind customized scrollbars to every scrollable html element like scrollable div or textarea for example or a virtual view like a canvas.

If you identify any errors in the library, or have an idea for an improvement, please open an issue or create a pull request.

Table of Contents

• Ngx-CustomScrollbars
  • Table of Contents
  • Installation
  • Usage
  • Vertical Scrollbar
  • Horizontal Scrollbar
  • Docs
  • Author
  • Credit

Installation

npm

npm i --save ngx-customscrollbar

# for angular 7
npm i --save [email protected]

Usage

Import NgxCustomScrollbarModule in your module

import { NgxCustomScrollbarModule } from "ngx-customscrollbar";

@NgModule({
  imports: [
    // ...
    NgxCustomScrollbarModule
  ]
})

Vertical Scrollbar

Component

import { Component } from "@angular/core";
import { ViewportControl } from "ngx-customscrollbar";

@Component({
    selector: "app-vertical-scroll",
    templateUrl: "vertical-scroll.component.html",
    styleUrls: ["./vertical-scroll.component.scss"],
    viewProviders: [ViewportControl]
})
export class VerticalScrollComponent {
    // generate array with 300 items
    public items: Array<string | number> =
        Array.from({ length: 300 }, (val, index) => index);
}

Template

<div class="scrollWrapper">
  <div class="scrollView" ngxCustomScrollbarScrollable>
    <div *ngFor="let item of items">Lorem Ipsum {{item}}</div>
  </div>
  <ngx-customscrollbar></ngx-customscrollbar>
</div>

SCSS

@import "~ngx-customscrollbar/scss/common";
@import "~ngx-customscrollbar/scss/ngx-customscrollbars.theme"

.scrollWrapper {

  @include ngxCustomScrollbarsTheme();

  display: flex;
  flex-direction: row;
  height: 500px;
  overflow: hidden;

  .scrollView {
    flex: 1;
    overflow-y: auto;
  }
}

Horizontal Scrollbar

Component

import { Component } from "@angular/core";
import { ViewportControl } from "ngx-customscrollbar";


@Component({
    selector: "app-vertical-scroll",
    templateUrl: "vertical-scroll.component.html",
    styleUrls: ["./vertical-scroll.component.scss"],
    viewProviders: [ViewportControl]
})
export class VerticalScrollComponent {
    public items: Array<string | number> =
        Array.from({ length: 20 }, (val, index) => index);
}

Template

<div class="scrollWrapper">
  <div class="scrollView" ngxCustomScrollbarScrollable>
    <div *ngFor="let item of items">Lorem Ipsum {{item}}</div>
  </div>
  <ngx-customscrollbar [scrollDirection]="horizontal"></ngx-customscrollbar>
</div>

SCSS

@import "~ngx-customscrollbar/scss/common";
@import "~ngx-customscrollbar/scss/ngx-customscrollbars.theme"

.scrollWrapper {
  // load scrollbars theme here
  @include ngxCustomScrollbarsTheme();

  display: flex;
  flex-direction: row;
  height: 500px;
  overflow: hidden;

  .scrollView {
    flex: 1;
    overflow-x: auto;

    > div {
        white-space: nowrap;
        width: 4000px;
        display: flex;
        justify-content: space-between;

        &:after {
            content: "end of scroll";
        }
    }
  }
}

Docs

-Theming
-Directives

Author

Q2g - Ralf Hannuschka Github

Credit

• Inspired by ngx-scrollbar