Package Exports

angular-smooth-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 (angular-smooth-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-smooth-scrollbar

smooth-scrollbar for angular projects.

Requirements

Angular 1.4+

Install

Via npm:

npm install angular-smooth-scrollbar --save

Or via bower:

bower install angular-smooth-scrollbar --save

Demo

http://idiotwu.github.io/angular-smooth-scrollbar/

Usage

Include all dependencies in your page file:

<link rel="stylesheet" href="smooth-scrollbar/dist/smooth-scrollbar.css">

<script src="angular.js"></script>
<script src="smooth-scrollbar/dist/smooth-scrollbar.js"></script>
<script src="angular-smooth-scrollbar/dist/angular-smooth-scrollbar.js"></script>

Add SmoothScrollbar as dependency to your angular app:
```
angular.module('myApp', ['SmoothScrollbar']);
```

Use it wherever you want:

As element:

<scrollbar name="scrollbar_name">
    ...
</scrollbar>

As attribute:

<section scrollbar="scrollbar_name">
    ...
</section>

Available Options

parameter	type	default	description
name	`string@`	N/A	Naming current scrollbar.
speed	`number=`	1	Scrolling speed scale.
damping	`number=`	0.1	Delta reduce damping, a float value between (0, 1), the lower the value is, the more smooth the scrolling will be.
thumbMinSize	`number=`	20	Minimal size for scrollbar thumb.
syncCallbacks	Boolean	false	Execute listeners in synchronous or asynchronous.
renderByPixels	`boolean=`	true	Render scrolling by integer pixels, set to `true` to improve performance.
alwaysShowTracks	`boolean=`	false	Keep scrollbar tracks visible whether it's scrolling or not.
continuousScrolling	`boolean=`\|`string=`	'auto'	Whether allow upper scrollable content to continue scrolling when current scrollbar reaches edge. When set to 'auto', it will be enabled on nested scrollbars, and disabled on first-class scrollbars.
overscrollEffect	`boolean=`\|`string=`	false	Experimental overscroll effect, `'bounce'` for iOS style effect and `'glow'` for Android style effect. Be careful when you enable this feature!
overscrollEffectColor	`string@`	'#87ceeb'	Canvas paint color with 'glow' effect.
overscrollDamping	Number	0.2	The same as `damping`, but for overscrolling.

Confusing with the option field? Try edit tool here!

ScrollbarServiceProvider

You can configure default scrollbar behavior here:

angular.module('myApp', ['SmoothScrollbar'])
.config((ScrollbarServiceProvider) => {
    // set default scrollbar behavior
});

ScrollbarServiceProvider.setDefaultOptions( options )

Set default scrollbar options for your angular app.

ScrollbarService

By given scrollbar a name via attribute, you can access your scrollbar instances through ScrollbarService.

    <scrollbar name="myScrollbar">...</scrollbar>

app.controller('MyCtrl', (ScrollbarService) => {
    const myScrollbar = ScrollbarService.getInstance('myScrollbar');
    ...
});

ScrollbarService.generateName()

Return a timestamp string, this will be useful while trying naming scrollbars uniquely.

ScrollbarService.getInstance( name )

Get scrollbar instance by giving the name, and return a promise with instance.

ScrollbarService.destroyInstance( name )

Destroy scrollbar with the given name.

APIs

Documents

License

MIT.