Custom overlay-scrollbars with native scrolling mechanism for Angular
Install it with npm
npm install ngx-scrollbar --save
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',
}
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
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);
}
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);
}
});
}
}
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!
- Inspired by gemini-scrollbar.