angular-smooth-scrollbar

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.
friction	Number=	10	Scrolling friction, a percentage value within (1, 100).
thumbMinSize	Number=	20	Minimal size for scrollbar thumb.
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.

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.