nms

ngx-malihu-scroller

Angular directive for custom scroller for angular web apps

Showing:

Popularity

Downloads/wk

13

GitHub Stars

3

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

2

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

ngx-malihu-scroller

Custom wrapper for malihu custom srcoller for Angular.

Getting Started

Dependencies

  1. Jquery
  2. Malihu Custom Scroller

Installing

npm i ngx-malihu-scroller

Usage:

With angular-cli:

=> Update the styles and Scripts arrays in angular-cli.json:

  "styles": [
        "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
        "styles.css"
      ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jquery-mousewheel/jquery.mousewheel.js",
    "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
  ]

=> Import MalihuCustomScrollerModule into your Angular Module :

  import { MalihuCustomScrollerModule } from 'ngx-malihu-scroller';

=> Add `MalihuCustomScrollerModule' to 'imports' array :

imports: [    MalihuCustomScrollerModule  ]

=> Then Use directive malihuCustomScroller to the DOM element where you need the scroller :

  a. With Default Options :
  ```
    <div  malihuCustomScroller></div>
  ```
  b. With your Custom Options :       
  You need to pass `scrollOptions` as an `@Input` to the `malihuCustomScroller` as below :
  ```
    <div  malihuCustomScroller [scrollOptions]="customOptions"></div>
  ```

For full Customization options, click here.

Events Handlers

=> You can subcribe to the below events of the directive:

Event NameUsageEvent trigggers
onCreatemalihuCustomScroller [scrollOptions]="customOptions" (onCreate)="yourFunction()"when plugin markup is created
onInitmalihuCustomScroller [scrollOptions]="customOptions" (onInit)="yourFunction()"when scrollbars have initialized
onScrollStartmalihuCustomScroller [scrollOptions]="customOptions" (onScrollStart)="yourFunction()"the moment a scroll event starts
onScrollmalihuCustomScroller [scrollOptions]="customOptions" (onScroll)="yourFunction()"when a scroll event completes
whileScrollingmalihuCustomScroller [scrollOptions]="customOptions" (whileScrolling)="yourFunction()"while scroll event is running
onTotalScrollmalihuCustomScroller [scrollOptions]="customOptions" (onTotalScroll)="yourFunction()"when content has scrolled all the way to bottom or right
onTotalScrollBackmalihuCustomScroller [scrollOptions]="customOptions" (onTotalScrollBack)="yourFunction()"triggers when content has scrolled all the way back to top or left

Demo

Please click here for Demo.

Contributors

Repository

Acknowledgments

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100