Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 days 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 (over 7 years ago)
Default Branch: master
Last Pushed: 2024-04-30T13:06:16.000Z (10 months ago)
Last Synced: 2024-05-01T22:56:40.104Z (10 months ago)
Topics: angular, bars, ngx-scrollbar, scroll, scrollbar, smooth, smooth-scrolling
Language: TypeScript
Homepage: https://ngx-scrollbar.netlify.app/
Size: 6.77 MB
Stars: 581
Watchers: 9
Forks: 96
Open Issues: 4
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)