JSPM

  • Created
  • Published
  • Downloads 92479
  • Score
    100M100P100Q189140F
  • License MIT

Custom overlay-scrollbars with native scrolling mechanism for Angular

Package Exports

  • ngx-scrollbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-scrollbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Custom Scrollbar

npm npm Build Status npm

Custom overlay-scrollbars with native scrolling mechanism for Angular


Table of Contents

Installation

Install it with npm

npm install ngx-scrollbar --save

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ngx-scrollbar:

map: {
  'ngx-scrollbar': 'node_modules/ngx-scrollbar/bundles/ngx-scrollbar.umd.js',
}

Here is a stackblitz

Usage

Import ScrollbarModule in the root module

import { ScrollbarModule } from 'ngx-scrollbar';

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

In your template

<ng-scrollbar>
  <!-- Content -->
</ng-scrollbar>

Options

Scrollbar inputs

  • [trackX]: boolean

    Horizontal scrollbar, default false

  • [trackY]: boolean

    Vertical scrollbar, default true

  • [autoHide]: boolean

    Hide scrollbars, and show them on hover, default false

  • [autoUpdate]: boolean

    Auto-update scrollbars on content changes, default: true

  • [viewClass]: string

    Add custom class to the view

  • [barClass]: string

    Add custom class to scrollbars

  • [thumbClass]: string

    Add custom class to scrollbars' thumbnails

Scrollbar functions

To use Scrollbar functions, you will need to get the component reference from the template. this can be done using the @ViewChild decortator, for example:

@ViewChild(ScrollbarComponent) scrollRef: ScrollbarComponent;

Update scrollbars manually

scrollRef.update()

Scroll horizontally

scrollRef.scrollXTo(position, duration?)
  • Position: scrolling position on X axis in pixels.
  • Duration: time to reach position in milliseconds, default 200ms.

Scroll vertically

scrollRef.scrollYTo(position, duration?)
  • Position: scrolling position on Y axis in pixels.
  • Duration: time to reach position in milliseconds, default 200ms.

Dynamic scrolling example

Scroll to top directly from the template

<ng-scrollbar #scrollRef>
  <!-- Content -->
</ng-scrollbar>

<button (click)="scrollRef.scrollYTo(0)">Scroll to top</button>

Or using the @ViewChild decorator

@ViewChild(ScrollbarComponent) scrollRef: ScrollbarComponent;

scrollToTop() {
   this.scrollRef.scrollYTo(0);
}

Scroll to top on route change

export class AppComponent implements OnInit {

  @ViewChild(ScrollbarComponent) scrollRef: ScrollbarComponent;

  constructor(private router: Router) {
  }

  ngOnInit() {

    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
        if (this.scrollRef) {
          this.scrollRef.scrollYTo(0);
        }
      });
  }

}

Development

This project uses ng-packagr for development.

Use the following command to build

$ npm run packagr

Issues

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

Author

Credit

More plugins