ng-scrollbar

A custom scrollbar written in pure AngularJS.

Tired of using jquery for a stupid scrollbar? well, this directive is just for you.

Usage

1. Add ng-scrollbar.min.js to you main file (index.html)

   you can download this by:

   • using bower and running bower install ng-scrollbar
   • Download the production version or the development version.

   In your web page:

   <script src="angular.js"></script>
   <script src="dist/ng-scrollbar.min.js"></script>
   <link rel="stylesheet" href="dist/ng-scrollbar.min.css" >

2. Set ngScrollbar as a dependency in your module

   var myapp = angular.module('myapp', ['ngScrollbar'])

3. Add ng-scrollbar directive to the wanted element, example:

   <div class="scrollme" ng-scrollbar> .... </div>

Rebuild the scrollbar

In case you need to rebuild the scrollbar, you may tell ng-scrollbar to rebuild it for you by broadcasting an event. It's useful to use this option when the size or visibility of the container is dynamic and during the link phase the size can't be determined.

  <div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" > .... </div>

  // rebuild the scrollbar
  $scope.$broadcast('rebuild:me');

In case you need to rebuild the scrollbar on every window's resize, you may use "rebuild-on-resize" option.

  <div class="scrollme" ng-scrollbar rebuild-on-resize > .... </div>

In case you need to stick content to bottom (chat or something) use "bottom" option.

  <div class="scrollme" ng-scrollbar bottom > .... </div>

If you want the content to always be at the top use the "top" option.

  <div class="scrollme" ng-scrollbar top > .... </div>

Examples

See the example in the respository.