Nondigestible Purple Mayonnaise

    ngx-malihu-scrollbar
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.0 • Public • Published

    ngx-malihu-scrollbar

    CircleCI Coverage Status version npm dependencies Status peerDependencies Status monthly Downloads

    Angular Malihu jQuery Custom Scrollbar directive and service.

    Malihu jQuery Custom Scrollbar is a highly customizable scrollbar plugin that include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more.

    Table of contents

    Installation

    Use the following command to add ngx-malihu-scrollbar library to your package.json file. Note that jQuery will automatically be downloaded as a dependency.

    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

    "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

    {
      "compilerOptions": {
        ...
        "types": [
    +     "jquery",
    +     "mcustomscrollbar"
        ]
      },
      ...
    }
     

    Usage

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

    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.

    Directive

    You can use malihu-scrollbar directive directly on an HTML element and provide plugin options using scrollbarOptions input property.

    example.component.ts

    public scrollbarOptions = { axis: 'yx', theme: 'minimal-dark' };

    example.component.html

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

    Service

    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.

    constructor(
      private mScrollbarServiceMalihuScrollbarService,
    ) { }
     
    ngAfterViewInit() {
      this.mScrollbarService.initScrollbar('#myElementId', { axis: 'y', theme: 'dark-thick', scrollButtons: { enable: true } });
    }
     
    ngOnDestroy() {
      this.mScrollbarService.destroy('#myElementId');
    }

    FAQ

    Can we customize the scrollbars?

    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.

    How can we apply scrollbar customization on the body?

    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 <body> element that is needed to allow scrollbar customization.

    import { MalihuScrollbarService } from 'ngx-malihu-scrollbar';
     
    constructor(
      private mScrollbarServiceMalihuScrollbarService,
    ) { }
     
    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

    git clone https://github.com/jfcere/ngx-malihu-scrollbar.git
     
    npm install
     
    ng serve

    Contribution

    Contributions are always welcome, just make sure that ...

    • Your code style matches with the rest of the project
    • Unit tests pass
    • Linter passes

    License

    Licensed under MIT.

    Install

    npm i ngx-malihu-scrollbar

    DownloadsWeekly Downloads

    2,321

    Version

    9.0.0

    License

    MIT

    Unpacked Size

    153 kB

    Total Files

    31

    Last publish

    Collaborators

    • j3ff