JSPM

  • Created
  • Published
  • Downloads 92910
  • Score
    100M100P100Q187055F
  • License MIT

Custom overlay-scrollbars with native scrolling mechanism for Angular

Package Exports

  • ngx-scrollbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-scrollbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Custom Scrollbar

Custom overlay-scrollbars with native scrolling mechanism for Angular


npm npm Build Status npm

Table of Contents

Installation

Install it with npm

npm install ngx-scrollbar --save

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ngx-scrollbar:

map: {
  'ngx-scrollbar': 'node_modules/ngx-scrollbar/bundles/ngx-scrollbar.umd.js',
}

Usage

Import ScrollbarModule in the root module

import { ScrollbarModule } from 'ngx-scrollbar';

@NgModule({
  imports: [
    // ...
    ScrollbarModule
  ]
})

In your template

<ng-scrollbar [style.height.px]="500">
  <!-- Content -->
</ng-scrollbar>

The component should have a fixed height

  • [autoHide]: boolean

Hide scrollbars, and show them on hover, default false

  • [trackX]: boolean

Horizontal scrollbar, default false

  • [trackY]: boolean

Vertical scrollbar, default true

Issues

If you identify any errors in the library, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

Author

Credit