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

Customizable and lightweight scrollbar Angular library based on native browser scrollbar
https://github.com/synapsium/ngx-scrollbar

angular chrome firefox ie lightweight ngx-scrollbar opera scrollbar

Last synced: about 1 month ago
JSON representation

Customizable and lightweight scrollbar Angular library based on native browser scrollbar

• Host: GitHub
• URL: https://github.com/synapsium/ngx-scrollbar
• Owner: Synapsium
• License: mit
• Created: 2018-11-27T19:50:08.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-08-12T08:13:03.000Z (over 1 year ago)
• Last Synced: 2024-10-29T03:07:23.526Z (2 months ago)
• Topics: angular, chrome, firefox, ie, lightweight, ngx-scrollbar, opera, scrollbar
• Language: TypeScript
• Size: 746 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  

    
ngx-scrollbar


  





Ngx-scrollbar is a customizable and lightweight scrollbar based on native browser scrollbar for Angular.



## Setup

### Installation

Install `ngx-scrollbar` library from `npm`

```bash

npm install @synapsium/ngx-scrollbar --save

```

### Style

Import ngx-scrollbar style into your project `styles.css`

```javascript

@import '../node_modules/@synapsium/ngx-scrollbar/styles/styles.scss';

```

### Module usage

Add `ScrollbarModule` to module

```javascript

import { ScrollbarModule, ScrollbarConfig, SCROLLBAR_CONFIG } from '@synapsium/ngx-scrollbar';

const DEFAULT_SCROLLBAR_CONFIG: ScrollbarConfig = {

  autoHide: true,

  trackbarMinThickness: 17,

  trackbarMaxThickness: 20,

  barMinSize: 20

};

@NgModule({

  ...

  imports: [

    ...

    ScrollbarModule

  ],

  providers: [

    {

      provide: SCROLLBAR_CONFIG,

      useValue: DEFAULT_SCROLLBAR_CONFIG

    }

  ]

})

```

## How to use

Add `scrollbar` directive to the container

```html



    



```