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

Custom overlay-scrollbars with native scrolling mechanism for Angular

Live Demo
Installation
Usage
Options
Scroll To
Development
Issues
Author
Credit
More plugins

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',
}

Usage

Import ScrollbarModule in the root module

import { ScrollbarModule } from 'ngx-scrollbar';

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

In your template

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

Scrollbar inputs

[autoHide]: boolean

Hide scrollbars, and show them on hover, default false
[trackX]: boolean

Horizontal scrollbar, default false
[trackY]: boolean

Vertical scrollbar, default true
[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

update()

Update scrollbars manually when content changes

scrollXTo(position: number, duration?: number)

Scroll element horizontally where position is left in px and duration is in milliseconds.

scrollYTo(position: number, duration?: number)

Scroll element vertically where position is top in px and duration is in milliseconds.

Scroll the view dynamically

Scrollbar component has 2 helper functions that allow you to scroll the view to a specific position

// scroll horizontally
scrollElement.scrollXTo(position, duration?);

// scroll vertically
scrollElement.scrollYTo(position, duration?);

It can be used directly from the template

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

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

Or use the ViewChild decorator to get a reference of the scrollbar component

@ViewChild(ScrollbarComponent) scrollEl: ScrollbarComponent;

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

Scroll to top on route change

export class AppComponent implements OnInit {

  @ViewChild(ScrollbarComponent) scrollEl: ScrollbarComponent;

  constructor(private router: Router) {
  }

  ngOnInit() {

    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
        if (this.scrollEl) {
          this.scrollEl.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.

ngx-scrollbar