{"id":18051898,"url":"https://github.com/shhdharmen/ngx-scrollbar-indicator","last_synced_at":"2025-04-10T18:16:38.216Z","repository":{"id":33859636,"uuid":"162295411","full_name":"shhdharmen/ngx-scrollbar-indicator","owner":"shhdharmen","description":"This will show an indicator with scrollbar","archived":false,"fork":false,"pushed_at":"2024-07-31T14:52:11.000Z","size":5531,"stargazers_count":6,"open_issues_count":28,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-24T15:52:37.149Z","etag":null,"topics":["angular","indicator","library","list","ngx-scrollbar-indicator","npms-score","scroll","scrollable","scrollbar","scrolling","scrollview","travis-ci"],"latest_commit_sha":null,"homepage":"https://shhdharmen.github.io/ngx-scrollbar-indicator/","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/shhdharmen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["paypal.me/shhdharmen","https://www.buymeacoffee.com/shhdharmen"]}},"created_at":"2018-12-18T13:51:09.000Z","updated_at":"2024-07-15T08:19:27.000Z","dependencies_parsed_at":"2024-07-27T13:06:24.932Z","dependency_job_id":null,"html_url":"https://github.com/shhdharmen/ngx-scrollbar-indicator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fngx-scrollbar-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fngx-scrollbar-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fngx-scrollbar-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fngx-scrollbar-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shhdharmen","download_url":"https://codeload.github.com/shhdharmen/ngx-scrollbar-indicator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245936691,"owners_count":20696878,"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","indicator","library","list","ngx-scrollbar-indicator","npms-score","scroll","scrollable","scrollbar","scrolling","scrollview","travis-ci"],"created_at":"2024-10-30T22:57:41.892Z","updated_at":"2025-03-27T22:33:01.002Z","avatar_url":"https://github.com/shhdharmen.png","language":"TypeScript","funding_links":["paypal.me/shhdharmen","https://www.buymeacoffee.com/shhdharmen"],"categories":[],"sub_categories":[],"readme":"# ngx-scrollbar-indicator\n\n[![npm package](https://badge.fury.io/js/ngx-scrollbar-indicator.svg)](https://www.npmjs.com/package/ngx-scrollbar-indicator \"npm package\")\n[![Travis CI Build](https://travis-ci.com/shhdharmen/ngx-scrollbar-indicator.svg?branch=master)](https://travis-ci.com/shhdharmen/ngx-scrollbar-indicator \"Travis-CI Build\")\n[![online demo](https://img.shields.io/badge/github--pages-online-blue.svg)](https://shhdharmen.github.io/ngx-scrollbar-indicator/ \"online demo\")\n[![online demo](https://img.shields.io/badge/stackblitz-online-blue.svg)](https://stackblitz.com/edit/ngx-scrollbar-indicator-basic?file=src/app/app.component.html \"online demo\")\n[![MIT License](https://img.shields.io/npm/l/ngx-scrollbar-indicator.svg)](https://github.com/shhdharmen/ngx-scrollbar-indicator/blob/master/LICENSE \"MIT License\")\n\nConsider a scenario, where you have 100s of items, sorted alphabetically. Now, when user scrolls through the same, user doesn't know easily which character he/she has arrived, this is where ngx-scrollbar-indicator comes in picture. This will add an indicator to scrollbar, which will show first character of the item in view port.\n\n---\n\n## Table of Contents\n\n- [What it does?](#what-it-does)\n  - [Description](#description)\n- [Examples](#examples)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [Options _ScrollbarIndicatorOptions_](#options-scrollbarindicatoroptions)\n  - [Properties](#properties)\n  - [Methods](#methods)\n- [Styling](#styling)\n- [Development](#development)\n- [Issues](#issues)\n- [Author](#author)\n- [Credit](#credit)\n- [ToDos](#todos)\n- [Badges](#badges)\n\n---\n\n\u003ca name=\"what-it-does\"/\u003e\n\n## What it does?\n\n### Description\n\n- Consider a scenario, where you have 100s of items, sorted alphabetically. Now, when user scrolls through the same, user doesn't know easily which character he/she has arrived, this is where ngx-scrollbar-indicator comes in picture. This will add an indicator to scrollbar, which will show first character of the item in view port. See screenshot below:\n\n![what it does gif](./chrome-capture.gif)\n\n\u003ca name=\"examples\"/\u003e\n\n## Examples\n\n- Stackblitz [Basic](https://stackblitz.com/edit/ngx-scrollbar-indicator-basic?file=src/app/app.component.html), [Styling](https://stackblitz.com/edit/ngx-scrollbar-indicator-style?file=src%2Fstyles.scss)\n- Github Pages [Basic](https://shhdharmen.github.io/ngx-scrollbar-indicator/basic), [Bootstrap](https://shhdharmen.github.io/ngx-scrollbar-indicator/bootstrap)\n\n\u003ca name=\"installation\"/\u003e\n\n## Installation\n\n**NPM**\n\n```bash\nnpm i ngx-scrollbar-indicator\n```\n\n\u003ca name=\"usage\"/\u003e\n\n## Usage\n\n1.  Import `NgxScrollbarIndicatorModule` in your module\n\n```js\n...\nimport { NgxScrollbarIndicatorModule } from 'ngx-scrollbar-indicator';\n...\n@NgModule({\n  ...\n  imports: [\n    BrowserModule,\n    ...,\n    NgxScrollbarIndicatorModule\n  ]\n})\n...\n```\n\n2.  import in style.scss\n\n```scss\n@import \"~ngx-scrollbar-indicator/assets/theme.scss\";\n```\n\n3.  In your template, wrap you element, in which you want indicator, like below :\n\n```html\n\u003cngx-scrollbar-indicator #indicatorRef\u003e\n  \u003c!-- Your element with *ngFor goes here. Do not forget to add attribute 'indicatorItem', which takes string from which first character will be visible in indicator. --\u003e\n\u003c/ngx-scrollbar-indicator\u003e\n```\n\n\u003ca name=\"api\"/\u003e\n\n## API\n\n- API consists of Options, Properties, Methods and Observers.\n\n\u003ca name=\"options\"\u003e\n\n### Options _[ScrollbarIndicatorOptions](https://github.com/shhdharmen/ngx-scrollbar-indicator/blob/master/projects/ngx-scrollbar-indicator/src/lib/interface/scrollbar-indicator-options.ts)_\n\n- You can give options according to you need and modify the behavior. All options are optional. Below is full list of options :\n\n| Option                    | Type                                   | Description                                                                                                                                                          |\n| ------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| enable                    | boolean                                | Enable or disable indicator. _Default : true_                                                                                                                        |\n| changeWhen **deprecated** | EChangeWhen (top/visible)              | When the indicator should change the character? When character has reach top of container or as soon as it becomes visible in container. _Default : EChangeWhen.top_ |\n| containerHeight           | number                                 | height of the container, without this, scrolling won't work. _Default : 500_                                                                                         |\n| theme                     | ETheme (circular/waterDrop/squareLike) | Visual theme of indicator, totally based on scss. _Default : ETheme.waterDrop_                                                                                       |\n| position **deprecated**   | EPosition (auto/top)                   | Position of indicator, whether to show on top or auto. _Default : EPosition.auto_                                                                                    |\n| showWhen                  | EShowWhen (always/scroll)              | When to show the indicator, always or onscroll/onhover. _Default : EShowWhen.scroll_                                                                                 |\n\n\u003ca name=\"properties\"\u003e\n\n### Properties\n\n| Name   | Type                                                                                                                                                                                            | Description                                   |\n| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| all    | [ScrollbarIndicatorItemDirective](https://github.com/shhdharmen/ngx-scrollbar-indicator/blob/master/projects/ngx-scrollbar-indicator/src/lib/directive/scrollbar-indicator-item.directive.ts)[] | All Items Array                               |\n| firsts | { [x: string]: ScrollbarIndicatorItemDirective }                                                                                                                                                | JSON Object with first item of each character |\n| lasts  | { [x: string]: ScrollbarIndicatorItemDirective }                                                                                                                                                | JSON Object with last item of each character  |\n\n\u003ca name=\"methods\"\u003e\n\n### Methods\n\n| Name             | Parameters                                                                                                                              | Returns                                                                             | Description                                                                                                                                                                                                                                     |\n| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| showIndicator    | - timer, this will help to maintain frequent calls to this function\u003cbr\u003e - duration (default 500), after which indicator will be hidden  | Timer, which can be cleared if you are calling this function again within duration. | Ideally, you shouldn't call this. This will show the indicator. This will add 'show' class to the indicator. And After duration(default 500), if will remove the same. Calling this won't make any sense if showWhen is set to EShowWhen.always |\n| goToLetter       | - letter, Character to which viewport should be scrolled\u003cbr\u003e- position (default 'first') Element of that character group, first or last | offsetTop of element or -1 if error                                                 | Scroll to a specific letter, positioned first of last. Returns the offsetTop if element found, else -1. Works only in Non-IE Browsers.                                                                                                          |\n| startCalculation | none                                                                                                                                    | void                                                                                | Call this only if you are changing options in the run-time. This will calculate arrays and characters, based on options. This is called once after ngAfterContentInit hook.                                                                     |\n\n\u003ca name=\"styling\"\u003e\n\n## Styling\n\nOnce you have imported `theme.scss` in `style.scss`, you will hae access to some variables. Be cautios while changing the same:\n\n```scss\n$indicator-background-color: #2196f3 !default;\n$indicator-background-size: 46px !default;\n$bubble-font-size: 16px !default;\n$bubble-font-weight: 400 !default;\n$indicator-font-color: #fff !default;\n$indicator-margin-right: 8px !default;\n$indicator-container-right: 105% !default;\n$indicator-right: 105% !default;\n$indicator-square-like-border-radius: 4px !default;\n```\n\n- You can find the styling example on [stackblitz](https://stackblitz.com/edit/ngx-scrollbar-indicator-style?file=src%2Fstyles.scss).\n\n\u003ca name=\"development\"/\u003e\n\n## Development\n\n- This project uses the Angular CLI for building the library.\n\n```bash\n$ ng build ngx-scrollbar-indicator\n```\n\nor\n\n```bash\n$ npm run build_lib\n```\n\n\u003ca name=\"issues\"/\u003e\n\n## Issues\n\n- If you identify any errors in the library, or have an idea for an improvement, please open an [issue](https://github.com/shhdharmen/ngx-scrollbar-indicator/issues).\n\n\u003ca name=\"author\"/\u003e\n\n## Author\n\n- Dharmen Shah [Github](https://github.com/shhdharmen), [Twitter](https://twitter.com/shhdharmen)\n\n\u003ca name=\"credit\"/\u003e\n\n## Credit\n\nI would like to give few credits, as this is my first Angular Library.\n\n- Thanks\n  - [Todd Palmer](https://twitter.com/toddtpalmer) for great series at [medium](https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5)\n  - [ng packagr](https://github.com/ng-packagr/ng-packagr) for simplifying creating, packaging and publishing Angular Library process\n- Inspiration : Contacts app in Android.\n\n\u003ca name=\"to-dos\"/\u003e\n\n## ToDos\n\n- Use [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n- Compatibilities with dates, like a time line\n- Show custom number of characters in indicator\n- Add example with [Angular Material](https://material.angular.io/)\n- Add more examples with bootstrap\n\n\u003ca name=\"badges\"\u003e\n\n## Badges\n\n[![npm package](https://badge.fury.io/js/ngx-scrollbar-indicator.svg)](https://www.npmjs.com/package/ngx-scrollbar-indicator \"npm package\")\n[![Travis CI Build](https://travis-ci.com/shhdharmen/ngx-scrollbar-indicator.svg?branch=master)](https://travis-ci.com/shhdharmen/ngx-scrollbar-indicator \"Travis-CI Build\")\n[![codecov](https://codecov.io/gh/shhdharmen/ngx-scrollbar-indicator/branch/master/graph/badge.svg)](https://codecov.io/gh/shhdharmen/ngx-scrollbar-indicator)\n[![online demo](https://img.shields.io/badge/github--pages-online-blue.svg)](https://shhdharmen.github.io/ngx-scrollbar-indicator/ \"online demo\")\n[![online demo](https://img.shields.io/badge/stackblitz-online-blue.svg)](https://stackblitz.com/edit/ngx-scrollbar-indicator-basic?file=src/app/app.component.html \"online demo\")\n![Downloads](https://img.shields.io/npm/dt/ngx-scrollbar-indicator.svg \"Total Downloads\")\n[![MIT License](https://img.shields.io/npm/l/ngx-scrollbar-indicator.svg)](https://github.com/shhdharmen/ngx-scrollbar-indicator/blob/master/LICENSE \"MIT License\")\n[![npms score](https://badges.npms.io/ngx-scrollbar-indicator.svg)](https://npms.io/search?q=ngx-scrollbar-indicator \"NPMS Score\")\n[![dependencies](https://img.shields.io/david/shhdharmen/ngx-scrollbar-indicator.svg)](https://www.npmjs.com/package/ngx-scrollbar-indicator#dependencies \"Dependencies\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshhdharmen%2Fngx-scrollbar-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshhdharmen%2Fngx-scrollbar-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshhdharmen%2Fngx-scrollbar-indicator/lists"}