A custom scrollbar written in pure AngularJS
Branch: master
Clone or download
asafdav Merge pull request #48 from leocaseiro/patch-1
Add example link to README
Latest commit 53e882a Nov 2, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Version bump Jun 19, 2015
example event and flag for scrollbar presence Jul 9, 2014
src Removing creation of parentOffetTop having taken out its use Jun 17, 2015
test Add rebuild on window resize Mar 31, 2014
.editorconfig First version Jan 17, 2014
.gitignore First version Jan 17, 2014
.jshintrc First version Jan 17, 2014
.travis.yml First version Jan 17, 2014
CONTRIBUTING.md First version Jan 17, 2014
Gruntfile.js First version Jan 17, 2014
LICENSE Initial commit Jan 17, 2014
README.md Add example link to README Nov 2, 2015
bower.json Version bump Jun 19, 2015
karma.conf.js Add rebuild on window resize Mar 31, 2014
package.json Version bump Jun 19, 2015

README.md

ng-scrollbar

A custom scrollbar written in pure AngularJS.

Works with the mouse and on touch screen.

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:

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" >
  1. Set ngScrollbar as a dependency in your module
var myapp = angular.module('myapp', ['ngScrollbar'])
  1. 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>

Events and Flags

On rebuilding the scrollbar you can get notified by 2 events

  $scope.$on('scrollbar.show', function(){
    console.log('Scrollbar show');
  });
  $scope.$on('scrollbar.hide', function(){
    console.log('Scrollbar hide');
  });

Or you can use "is-bar-shown" option. It should be read-only

<div class="scrollme" ng-scrollbar is-bar-shown="flag" > .... </div>
<div> Bar shown: {{flag}} </div>

Examples

See the example in the respository. example/index.html

Bitdeli Badge