Angular Custom Scrollbar
Custom overlay-scrollbars with native scrolling mechanism for Angular
Table of Contents
- Live Demo
- Installation
- Usage
- Options
- Dynamic scrolling
- 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',
}
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
-
(scrollState):
Stream that emits that component has been scrolled.
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
- Inspired by gemini-scrollbar.