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:
-
Add
SmoothScrollbar
as dependency to your angular app:angular; -
Use it wherever you want:
-
As element:
... -
As attribute:
...
-
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;
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
.
...
app;
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
License
MIT.