Custom overlay-scrollbars with native scrolling mechanism for Angular
- Live Demo
- Installation
- Usage
- Options
- Dynamic scrolling
- Development
- Issues
- Author
- Credit
- More plugins
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',
}
Here is a stackblitz
Import ScrollbarModule
in the root module
import { ScrollbarModule } from 'ngx-scrollbar';
@NgModule({
imports: [
// ...
ScrollbarModule
]
})
In your template
<ng-scrollbar>
<!-- Content -->
</ng-scrollbar>
-
[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.
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;
scrollRef.update()
scrollRef.scrollXTo(position, duration?)
- Position: scrolling position on X axis in pixels.
- Duration: time to reach position in milliseconds, default null.
scrollRef.scrollYTo(position, duration?)
- Position: scrolling position on Y axis in pixels.
- Duration: time to reach position in milliseconds, default null.
scrollRef.scrollToTop(duration?)
- Duration: time to reach position in milliseconds, default null.
scrollRef.scrollToBottom(duration?)
- Duration: time to reach position in milliseconds, default null.
scrollRef.scrollToLeft(duration?)
- Duration: time to reach position in milliseconds, default null.
scrollRef.scrollToRight(duration?)
- Duration: time to reach position in milliseconds, default null.
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);
}
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);
}
});
}
}
This project uses Angular CLI 6 for development.
$ ng build ngx-scrollbar --prod
If you identify any errors in the library, or have an idea for an improvement, please open an issue.
- Inspired by gemini-scrollbar.