Angular Custom Scrollbar

Custom overlay-scrollbars with native scrolling mechanism for Angular

Table of Contents

• Live Demo
• Installation
• Usage
• Scroll To
• Issues
• Author
• Credit

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 [style.height.px]="500">
  <!-- Content -->
</ng-scrollbar>

The component should have a fixed height

• [autoHide]: boolean

  Hide scrollbars, and show them on hover, default false

• [trackX]: boolean

  Horizontal scrollbar, default false

• [trackY]: boolean

  Vertical scrollbar, 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

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);
        }
      });
  }

}

Issues

If you identify any errors in the library, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

Author

• Murhaf Sousli Github, Twitter

Credit

• Inspired by gemini-scrollbar.