smooth-scrollbar for angular projects.
Angular 1.4+
Via npm:
npm install angular-smooth-scrollbar --save
Or via bower:
bower install angular-smooth-scrollbar --save
http://idiotwu.github.io/angular-smooth-scrollbar/
-
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>
-
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!
You can configure default scrollbar behavior here:
angular.module('myApp', ['SmoothScrollbar'])
.config((ScrollbarServiceProvider) => {
// set default scrollbar behavior
});
Set default scrollbar options for your angular app.
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');
...
});
Return a timestamp string, this will be useful while trying naming scrollbars uniquely.
Get scrollbar instance by giving the name, and return a promise with instance.
Destroy scrollbar with the given name.
MIT.