This is an Angular wrapper library for the Perfect Scrollbar.
See a live example application here.
npm install
npm run build
npm run inline
npm link
cd example
npm link ngx-perfect-scrollbar
cd example
npm install
npm start
(or 'npm run start:sjs' for using SystemJS)
npm install ngx-perfect-scrollbar --save-dev
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
@NgModule({
...
imports: [
...
PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
]
})
This library provides two ways to create a Perfect Scrollbar element, a component and a directive.
COMPONENT USAGE
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>
</perfect-scrollbar>
[config] // Custom config to override the global defaults.
[disabled] // Disables the perfect scrollbar initialization.
[usePSClass] // Use ps class (needed by the ps theme styles).
[autoPropagation] // Automatic swipe and wheel propagation control.
[scrollIndicators] // Enable fading edges scroll indicators showing.
[runInsideAngular] // Run perfect scrollbar inside the Angular zone.
(<ps-event-name>) // All perfect scrollbar events work as bindings.
DIRECTIVE USAGE
When using only the directive you need to provide your own theming or import the default theme:
@import 'https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.7.0/css/perfect-scrollbar.min.css';
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.
[disabled] // Disables the perfect scrollbar initialization.
[usePSClass] // Use ps class (needed by the ps theme styles).
[psPosStyle] // Position style (controls scrollbar placement).
[runInsideAngular] // Run perfect scrollbar inside the Angular zone.
(<ps-event-name>) // All perfect scrollbar events work as bindings.
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 events / options see the Perfect Scrollbar documentation.
update() // Updates the scrollbar size and position.
geometry(property) // Returns the geometry for specified property.
scrollTo(x, y, speed) // Animate scroll to given x,y coordinates.
scrollToY(position, speed) // Animate scroll to given vertical position.
scrollToX(position, speed) // Animate scroll to given horizontal position.
scrollToTop(offset, speed) // Animate scroll to given offset from the top.
scrollToLeft(offset, speed) // Animate scroll to given offset from the left.
scrollToRight(offset, speed) // Animate scroll to given offset from the right.
scrollToBottom(offset, speed) // Animate scroll to given offset from the bottom.
Above functions can be accessed through the directive reference (available as directiveRef in the component).