Angular 2 Perfect Scrollbar
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):
;; const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = suppressScrollX: true; @
Use it in your html template (with custom configuration):
This library provides two ways to create a Dropzone element, simple component and custom directive.
COMPONENT USAGE
Simply replace the element that would ordinarily be passed to Ps.initialize
with the perfect-scollbar component.
Scrollable content
config // Custom config to override the global defaults.
DIRECTIVE USAGE
When using only the directive you need to provide your own theming or import the default theme:
;
Perfect scrollbar directive should be used with div elements and can take optional custom configuration:
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.