https://github.com/murhafsousli/ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism
https://github.com/murhafsousli/ngx-scrollbar

angular bars ngx-scrollbar scroll scrollbar smooth smooth-scrolling

Last synced: 7 months ago
JSON representation

Custom overlay-scrollbars with native scrolling mechanism

• Host: GitHub
• URL: https://github.com/murhafsousli/ngx-scrollbar
• Owner: MurhafSousli
• License: mit
• Created: 2017-11-07T05:08:08.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2025-01-26T08:33:51.000Z (11 months ago)
• Last Synced: 2025-05-08T17:46:42.406Z (7 months ago)
• Topics: angular, bars, ngx-scrollbar, scroll, scrollbar, smooth, smooth-scrolling
• Language: TypeScript
• Homepage: https://ngx-scrollbar.netlify.app/
• Size: 7.23 MB
• Stars: 640
• Watchers: 10
• Forks: 98
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          


  

  
Angular Custom Scrollbar


[![Demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://ngx-scrollbar.netlify.app/)

[![Stackblitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-scrollbar)

[![Backers on Open Collective](https://opencollective.com/ngx-scrollbar/tiers/backers/badge.svg?label=Backers&color=brightgreen)](#sponsoring-ngx-scrollbar)

[![npm](https://img.shields.io/npm/v/ngx-scrollbar.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-scrollbar)

[![CI Build](https://github.com/MurhafSousli/ngx-scrollbar/workflows/tests/badge.svg)](https://github.com/MurhafSousli/ngx-scrollbar/actions?query=workflow%3Aci-build)

[![codecov](https://codecov.io/gh/MurhafSousli/ngx-scrollbar/graph/badge.svg?token=TO2idZEE1i)](https://codecov.io/gh/MurhafSousli/ngx-scrollbar)

[![Downloads](https://img.shields.io/npm/dt/ngx-scrollbar.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-scrollbar)

[![NPM Downloads](https://img.shields.io/npm/dm/ngx-scrollbar.svg)](https://www.npmjs.com/package/ngx-scrollbar)

[![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)

Custom overlay-scrollbars with native scrolling mechanism for Angular, it also provides a cross-browser smooth scroll directive.

***

## Features

- Exceptional performance, see [comparing test results](https://github.com/MurhafSousli/ngx-scrollbar/wiki/Performance-analysis).

- Native scrolling mechanism.

- Easily Customizable using CSS variables.

- Easy integration with 3rd party libraries.

- RTL support.

- Mobile support.

- SSR support.

#### Addons directives:

- Smooth scroll functionality.

- Scroll reached & dropped events.

- **MatSelect** integration.

- **CdkVirtualScroll** integration.

***

## Documentations

### Table of contents

* [Usage](projects/ngx-scrollbar/docs/Usage.md)

* [Styling](projects/ngx-scrollbar/docs/Styling.md)

* [Global Options](projects/ngx-scrollbar/docs/Global-options.md)

* [Smooth Scroll Functions](projects/ngx-scrollbar/docs/Smooth-Scroll-Functions.md)

* [Scroll Timeline Polyfill](projects/ngx-scrollbar/docs/Scroll-timeline-polyfill.md)

### Addons:

* [Integration Examples](projects/ngx-scrollbar/docs/Integration.md)

  * [Material Select](projects/ngx-scrollbar/docs/Integration.md#material-select)

  * [Material Dialog](projects/ngx-scrollbar/docs/Integration.md#material-dialog)

  * [CDK Virtual Scroll](projects/ngx-scrollbar/docs/Integration.md#cdk-virtual-scroll)

  * [ngx-datatable table](projects/ngx-scrollbar/docs/Integration.md#ngx-datatable-table)

  * [Ag-grid table](projects/ngx-scrollbar/docs/Integration.md#ag-grid-table)

  * [PrimeNG Scroller](projects/ngx-scrollbar/docs/Integration.md#primeng-scroller)

  * [PrimeNG Table](projects/ngx-scrollbar/docs/Integration.md#primeng-table)

  * [PrimeNG Dropdown](projects/ngx-scrollbar/docs/Integration.md#primeng-dropdown)

  * [PrimeNg Dropdown (Virtual Scroll)](projects/ngx-scrollbar/docs/Integration.md#primeng-dropdown-virtual-scroll)

  * [Kendu UI Grid](projects/ngx-scrollbar/docs/Integration.md#kendu-ui-grid)

* [Reached & Dropped Events](projects/ngx-scrollbar/docs/Reached-&-Dropped-Events.md)

* [Smooth Scroll Functions (without NgScrollbar)](projects/ngx-scrollbar/docs/Smooth-Scroll.md)

___

## Issues

If you identify any errors in the library, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-scrollbar/issues).

## Author

- Murhaf Sousli [Github](https://github.com/MurhafSousli), [Twitter](https://twitter.com/MurhafSousli)

## More plugins

- [ngx-sharebuttons](https://github.com/MurhafSousli/ngx-sharebuttons)

- [ngx-gallery](https://github.com/MurhafSousli/ngx-gallery)

- [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar)

- [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar)

- [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating)

- [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus)

- [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs)