Angular 2 wrapper library for Perfect Scrollbar

Downloads in past


519862.0.67 years ago8 years agoMinified + gzip package size for angular2-perfect-scrollbar in KB


Angular 2 Perfect Scrollbar
npm version
This is an Angular 2 wrapper library for Perfect Scrollbar.
See a live example application here.

Building the library

npm install
npm run build

Running the example

cd example
npm install
npm start

Installing and usage

npm install angular2-perfect-scrollbar --save-dev
Load the module for your app (with global configuration):
import { PerfectScrollbarModule } from 'angular2-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'angular2-perfect-scrollbar';

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true

  imports: [
Use it in your html template (with custom configuration):
This library provides two ways to create a Dropzone element, simple component and custom directive.
Simply replace the element that would ordinarily be passed to Ps.initialize with the perfect-scollbar component.
<perfect-scrollbar class="container" [config]="config">
  <div class="content">Scrollable content</div>

[config]                // Custom config to override the global defaults.

When using only the directive you need to provide your own theming or import the default theme:
@import '';

Perfect scrollbar directive should be used with div elements and can take optional custom configuration:
<div [perfect-scrollbar]="config"></div>

[perfect-scrollbar]     // Can be used to provide optional custom config.
Available configuration options (custom / global configuration):
wheelSpeed              // Scroll speed for the mousewheel event (Default: 1).
wheelPropagation        // Propagate wheel events at the end (Default: false).
swipePropagation        // Propagate swipe events at the end (Default: true).
minScrollbarLength      // Minimum size for the scrollbar (Default: null).
maxScrollbarLength      // Maximum size for the scrollbar (Default: null).
useBothWheelAxes        // Always use the both wheel axes (Default: false).
suppressScrollX         // Disable X axis in all situations (Default: false).
suppressScrollY         // Disable Y axis ni all situations (Default: false).
scrollXMarginOffset     // Offset before enabling the X scroller (Default: 0).
scrollYMarginOffset     // Offset before enabling the Y scroller (Default: 0).
stopPropagationOnClick  // Stop the propagation of click event (Default: true).

For more detailed documentation with all the supported options see Perfect Scrollbar documentation.