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

1. 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>

2. Add SmoothScrollbar as dependency to your angular app:

   angular.module('myApp', ['SmoothScrollbar']);

3. 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.