UNPKG

ngx-scrollbar

Version:

<p align="center"> <img height="165px" width="165px" style="text-align: center;" src="https://cdn.statically.io/gh/MurhafSousli/ngx-scrollbar/master/projects/ngx-scrollbar-demo/public/logo.svg"> <h1 align="center">Angular Custom Scrollbar</h1> </p>

ngx-scrollbar.netlify.app

MurhafSousli/ngx-scrollbar

85 lines (63 loc) • 3.95 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<p align="center"> <img height="165px" width="165px" style="text-align: center;" src="https://cdn.statically.io/gh/MurhafSousli/ngx-scrollbar/master/projects/ngx-scrollbar-demo/public/logo.svg"> <h1 align="center">Angular Custom Scrollbar</h1> </p> [![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](docs/Usage.md) * [Styling](docs/Styling.md) * [Global Options](docs/Global-options.md) * [Smooth Scroll Functions](docs/Smooth-Scroll-Functions.md) * [Scroll Timeline Polyfill](docs/Scroll-timeline-polyfill.md) ### Addons: * [Integration Examples](docs/Integration.md) * [Material Select](docs/Integration.md#material-select) * [Material Dialog](docs/Integration.md#material-dialog) * [CDK Virtual Scroll](docs/Integration.md#cdk-virtual-scroll) * [ngx-datatable table](docs/Integration.md#ngx-datatable-table) * [Ag-grid table](docs/Integration.md#ag-grid-table) * [PrimeNG Scroller](docs/Integration.md#primeng-scroller) * [PrimeNG Table](docs/Integration.md#primeng-table) * [PrimeNG Dropdown](docs/Integration.md#primeng-dropdown) * [PrimeNg Dropdown (Virtual Scroll)](docs/Integration.md#primeng-dropdown-virtual-scroll) * [Kendu UI Grid](docs/Integration.md#kendu-ui-grid) * [Reached & Dropped Events](docs/Reached-&-Dropped-Events.md) * [Smooth Scroll Functions (without NgScrollbar)](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)