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="scrollbarName">
         ...
     </scrollbar>
     

   • As attribute:

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

Available Options

parameter	type	default	description
speed	Number	1	scrolling speed
stepLength	Number	50	how long each scrolling is (px/delta)
easingDuration	Number	1000	how long will easing takes after touchend event
easingCurve	String	cubic-bezier(0.1, 0.57, 0.1, 1)	easing timing function, either css timing-function or pre-defined curves here
propagation	Boolean	true	event propagation

ScrollbarService

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

ScrollbarService.getInstance( name )

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

ScrollbarService.destroyInstance( name )

Remove all event listeners on the named instance, but will not remove scrollbar from DOM.

APIs

Documents

License

MIT.