ngx-malihu-scrollbar-ex

Table of contents

• Installation
• Usage

Installation

Use the following command to add ngx-malihu-scrollbar-ex library to your package.json file.

npm i ngx-malihu-scrollbar-ex --save

Usage

You must import MalihuScrollbarModule inside your module to be able to use malihu-scrollbar directive

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
+ import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar-ex';


@NgModule({
  imports: [
    CommonModule,
+   MalihuScrollbarModule.forRoot(),
  ],
})

You can also pass the default options to MalihuScrollbarModule

MalihuScrollbarModule.forRoot({
    axis: 'y',
    theme: 'minimal-dark',
    scrollInertia: 50,
    mouseWheel: { preventDefault: true }
}),

ngx-malihu-scrollbar-ex provides a directive 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.

Component

You can use malihu-component component directly on an HTML element, ~~CSS file in angular.json is required here~~ that's all!

home.component.html

<div malihu-component #mlh="malihuComponent" (click)="mlh.scrollTo('bottom')">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</div>

Directive

You can use malihu-scrollbar directive directly on an HTML element

You will need to add Malihu Custom Scrollbar CSS files to your application.

If you are using Angular CLI you can follow the example below...

.angular-cli.json

"styles": [
+ "node_modules/ngx-malihu-scrollbar-ex/malihu-scrollbar.css",
  "styles.scss",
],

home.component.html

<div malihu-scrollbar>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</div>

You can also provide plugin options by passing that options to its property.

home.component.ts

public scrollbarOptions = { axis: 'y', theme: 'minimal' };

home.component.html

<div [malihu-scrollbar]="scrollbarOptions">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</div>

To use the malihu-scrollbar directive in angular template html

<div malihu-scrollbar #mlh="malihuScrollbar" (click)="mlh.disable()">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</div>