{"id":13497487,"url":"https://github.com/jfcere/ngx-malihu-scrollbar","last_synced_at":"2025-05-13T23:33:03.748Z","repository":{"id":37693167,"uuid":"82644298","full_name":"jfcere/ngx-malihu-scrollbar","owner":"jfcere","description":"Angular 2+ scrollbar customization using Malihu jQuery Custom Scrollbar plugin","archived":true,"fork":false,"pushed_at":"2025-02-06T12:21:51.000Z","size":6585,"stargazers_count":58,"open_issues_count":36,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-08T04:49:14.535Z","etag":null,"topics":["angular","directive","malihu","ngx","scrollbar","service"],"latest_commit_sha":null,"homepage":"https://jfcere.github.io/ngx-malihu-scrollbar","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jfcere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-21T06:23:54.000Z","updated_at":"2025-02-06T12:22:19.000Z","dependencies_parsed_at":"2023-02-02T21:00:52.945Z","dependency_job_id":null,"html_url":"https://github.com/jfcere/ngx-malihu-scrollbar","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-malihu-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-malihu-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-malihu-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-malihu-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfcere","download_url":"https://codeload.github.com/jfcere/ngx-malihu-scrollbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253838985,"owners_count":21972246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","directive","malihu","ngx","scrollbar","service"],"created_at":"2024-07-31T20:00:31.847Z","updated_at":"2025-05-13T23:32:58.734Z","avatar_url":"https://github.com/jfcere.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# ngx-malihu-scrollbar\n[![CircleCI](https://circleci.com/gh/jfcere/ngx-malihu-scrollbar/tree/master.svg?style=shield)](https://circleci.com/gh/jfcere/ngx-malihu-scrollbar/tree/master) [![Coverage Status](https://coveralls.io/repos/github/jfcere/ngx-malihu-scrollbar/badge.svg?branch=master)](https://coveralls.io/github/jfcere/ngx-malihu-scrollbar?branch=master) [![version](https://img.shields.io/npm/v/ngx-malihu-scrollbar.svg?style=flat)](https://www.npmjs.com/package/ngx-malihu-scrollbar) [![npm](https://img.shields.io/npm/l/ngx-malihu-scrollbar.svg)](https://opensource.org/licenses/MIT) [![dependencies Status](https://david-dm.org/jfcere/ngx-malihu-scrollbar/status.svg?path=lib)](https://david-dm.org/jfcere/ngx-malihu-scrollbar?path=lib) [![peerDependencies Status](https://david-dm.org/jfcere/ngx-malihu-scrollbar/peer-status.svg?path=lib)](https://david-dm.org/jfcere/ngx-malihu-scrollbar?path=lib\u0026type=peer) [![monthly Downloads](https://img.shields.io/npm/dm/ngx-malihu-scrollbar.svg)](https://www.npmjs.com/package/ngx-malihu-scrollbar)\n\nAngular Malihu jQuery Custom Scrollbar directive and service.\n\n\u003e 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.\n\n- Demo available @ [jfcere.github.io/ngx-malihu-scrollbar](https://jfcere.github.io/ngx-malihu-scrollbar)\n- StackBlitz available @ https://stackblitz.com/edit/ngx-malihu-scrollbar\n\n### Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [FAQ](#faq)\n- [Demo application](#demo-application)\n- [Contribution](#contribution)\n\n## Installation\n\nUse the following command to add ngx-malihu-scrollbar library to your `package.json` file. Note that jQuery will automatically be downloaded as a dependency.\n\n```bash\nnpm install ngx-malihu-scrollbar --save\n```\n\nYou will need to add Malihu Custom Scrollbar javascript and css files with jQuery to your application.\n\nIf you are using [Angular CLI](https://cli.angular.io/) you can follow the example below...\n\n#### angular.json\n\n```diff\n\"styles\": [\n  \"src/styles.scss\",\n+ \"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css\"\n],\n\"scripts\": [\n+ \"node_modules/jquery/dist/jquery.min.js\",\n+ \"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js\"\n],\n```\n\n#### tsconfig.app.json\n\n```diff\n{\n  \"compilerOptions\": {\n    ...\n    \"types\": [\n+     \"jquery\",\n+     \"mcustomscrollbar\"\n    ]\n  },\n  ...\n}\n\n```\n\n## Usage\n\nYou must import `MalihuScrollbarModule` inside your module to be able to use `malihu-scrollbar` directive or `MalihuScrollbarService`.\n\n```diff\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n+ import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';\n\nimport { HomeComponent } from './home.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n+   MalihuScrollbarModule.forRoot(),\n  ],\n  declarations: [HomeComponent],\n})\n```\n\nngx-malihu-scrollbar provides both a directive and a service to apply the custom scrollbar on your HTML element.\n\n\u003e For a complete list of available customization options please refer to the original [Malihu Custom Scrollbar documentation](http://manos.malihu.gr/jquery-custom-content-scroller/).\n\n### Directive\n\nYou can use `malihu-scrollbar` directive directly on an HTML element and provide plugin options using `scrollbarOptions` input property.\n\n#### example.component.ts\n```typescript\npublic scrollbarOptions = { axis: 'yx', theme: 'minimal-dark' };\n```\n\n#### example.component.html\n```html\n\u003cdiv malihu-scrollbar [scrollbarOptions]=\"scrollbarOptions\"\u003e\n   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...\n\u003c/div\u003e\n```\n\n### Service\n\nAlternatively, 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.\n\nThe service also provide access to other Malihu Custom Scrollbar methods such as `scrollTo`, `stop`, `update`, `disable` and `destroy`.\n\n```typescript\nconstructor(\n  private mScrollbarService: MalihuScrollbarService,\n) { }\n\nngAfterViewInit() {\n  this.mScrollbarService.initScrollbar('#myElementId', { axis: 'y', theme: 'dark-thick', scrollButtons: { enable: true } });\n}\n\nngOnDestroy() {\n  this.mScrollbarService.destroy('#myElementId');\n}\n```\n\n## FAQ\n\n### Can we customize the scrollbars?\nOf 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](http://manos.malihu.gr/jquery-custom-content-scroller/#styling-section) for more details.\n\n\u003e The \"custom-theme\" example on the bottom of the [demo](https://jfcere.github.io/ngx-malihu-scrollbar) is a good example of customization where I created a my own \"metro\" theme.\n\n### How can we apply scrollbar customization on the body?\nUsing `MalihuScrollbarService` you can target `document.body` to apply customization to the body scrollbar.\n\n\u003e Note that this will automaticaly add some specific CSS to the `\u003cbody\u003e` element that is needed to allow scrollbar customization.\n\n```typescript\nimport { MalihuScrollbarService } from 'ngx-malihu-scrollbar';\n\nconstructor(\n  private mScrollbarService: MalihuScrollbarService,\n) { }\n\nngOnInit() {\n  this.mScrollbarService.initScrollbar(document.body, { axis: 'y', theme: 'dark-3' });\n}\n```\n\n## Demo application\n\nYou can find the [demo](https://jfcere.github.io/ngx-malihu-scrollbar) source code inside the `demo` directory.\n\nThe following commands will clone the repository, install npm dependencies and serve the application @ [http://localhost:4200](http://localhost:4200)\n\n```bash\ngit clone https://github.com/jfcere/ngx-malihu-scrollbar.git\n\nnpm install\n\nng serve\n```\n\n## Contribution\n\nContributions are always welcome, just make sure that ...\n\n- Your code style matches with the rest of the project\n- Unit tests pass\n- Linter passes\n\n## License\n\nLicensed under [MIT](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfcere%2Fngx-malihu-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfcere%2Fngx-malihu-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfcere%2Fngx-malihu-scrollbar/lists"}