Angular scrollbar customization using Malihu jQuery Custom Scrollbar plugin
npm install ngx-malihu-scrollbar-angular18package.json file. Note that jQuery will automatically be downloaded as a dependency.
bash
npm install ngx-malihu-scrollbar --save
`
You will need to add Malihu Custom Scrollbar javascript and css files with jQuery to your application.
If you are using Angular CLI you can follow the example below...
#### angular.json
`diff
"styles": [
"src/styles.scss",
+ "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
],
"scripts": [
+ "node_modules/jquery/dist/jquery.min.js",
+ "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
],
`
#### tsconfig.app.json
`diff
{
"compilerOptions": {
...
"types": [
+ "jquery",
+ "mcustomscrollbar"
]
},
...
}
`
Usage
You must import MalihuScrollbarModule inside your module to be able to use malihu-scrollbar directive or MalihuScrollbarService.
`diff
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
+ import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
import { HomeComponent } from './home.component';
@NgModule({
imports: [
CommonModule,
+ MalihuScrollbarModule.forRoot(),
],
declarations: [HomeComponent],
})
`
ngx-malihu-scrollbar provides both a directive and a service to apply the custom scrollbar on your HTML element.
> For a complete list of available customization options please refer to the original Malihu Custom Scrollbar documentation.
$3
You can use malihu-scrollbar directive directly on an HTML element and provide plugin options using scrollbarOptions input property.
#### example.component.ts
`typescript
public scrollbarOptions = { axis: 'yx', theme: 'minimal-dark' };
`
#### example.component.html
`html
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
`
$3
Alternatively, you can initialize scrollbar customizations using MalihuScrollbarService by providing either a string selector, a jQuery object or an HTML element along with the scrolling options.
The service also provide access to other Malihu Custom Scrollbar methods such as scrollTo, stop, update, disable and destroy.
`typescript
constructor(
private mScrollbarService: MalihuScrollbarService,
) { }
ngAfterViewInit() {
this.mScrollbarService.initScrollbar('#myElementId', { axis: 'y', theme: 'dark-thick', scrollButtons: { enable: true } });
}
ngOnDestroy() {
this.mScrollbarService.destroy('#myElementId');
}
`
FAQ
$3
Of course, the scrollbars are fully customizable. You can easily clone an existing theme and modify the CSS to apply your own styling. Follow the instructions provided on the original Malihu Custom Scrollbar Plugin documentation for more details.
> The "custom-theme" example on the bottom of the demo is a good example of customization where I created a my own "metro" theme.
$3
Using MalihuScrollbarService you can target document.body to apply customization to the body scrollbar.
> Note that this will automaticaly add some specific CSS to the element that is needed to allow scrollbar customization.
`typescript
import { MalihuScrollbarService } from 'ngx-malihu-scrollbar';
constructor(
private mScrollbarService: MalihuScrollbarService,
) { }
ngOnInit() {
this.mScrollbarService.initScrollbar(document.body, { axis: 'y', theme: 'dark-3' });
}
`
Demo application
You can find the demo source code inside the demo directory.
The following commands will clone the repository, install npm dependencies and serve the application @ http://localhost:4200
`bash
git clone https://github.com/jfcere/ngx-malihu-scrollbar.git
npm install
ng serve
``