Angular-perfect-scrollbar-2 NPM

angular-perfect-scrollbar-2

Another wrapper around perfect-scrollbar.

Motivation

No need to include CSS from node_modules, it is injected automatically (which may cause problems if you need significantly changed version of it, but handy otherwise).
Simpler configuration interface compared to angular-perfect-scrollbar -- you just pass a configuration object, not individual properties.
A MutationObserver, if supported, is used to update a scrollbar.
Scrollbar can be updated manually when necessary.

Usage

npm install angular-perfect-scrollbar-2
In app code:
```
angular.module('app', [ require('angular-perfect-scrollbar-2') ])
```
or replace require() by 'angular-perfect-scrollbar-2' and put appropriate <script src='.../dist/index.js'> tag in your html.
Use <perfect-scrollbar> directive in your templates:

<style type="text/css">
	.scroll-wrapper {
		position: relative;
		overflow: hidden;
		height: 300px;
	}
</style>

<perfect-scrollbar class="scroll-wrapper" opts="..." update="update">
	... SCROLLABLE CONTENT HERE ...
</perfect-scrollbar>

The opts attribute allows to configure the perfect-scrollbar instance (see perfect-scrollbar). For example:

// in controller:
$scope.scrollopts = {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
};

<!-- in template -->
<perfect-scrollbar opts="scrollopts">
	...
</perfect-scrollbar>

Or you may pass an object directly within template:

<perfect-scrollbar opts="{minScrollBarLength: 20}">
	...
</perfect-scrollbar>

The update attribute may point to a variable from $scope. Setting this variable to true forces scrollbar update. The variable is set to false automatically afterwards.