ng-scrollbar

A custom scrollbar written in pure AngularJS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng-scrollbar
0.0.89 years ago9 years agoMinified + gzip package size for ng-scrollbar in KB

Readme

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: using bower and running bower install ng-scrollbar Download the production versionmin or the development versionmax.
min: https://raw.github.com/asafdav/ng-scrollbar/master/dist/angular-ng-scrollbar.min.js max: https://raw.github.com/asafdav/ng-scrollbar/master/dist/angular-ng-scrollbar.js
In your web page:
```html ```
  1. Set ngScrollbar as a dependency in your module
```javascript var myapp = angular.module('myapp', 'ngScrollbar') ```
  1. Add ng-scrollbar directive to the wanted element, example:
```html
....
```

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. ```html
....
```
```javascript // 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. ```html
....
```
In case you need to stick content to bottom (chat or something) use "bottom" option. ```html
....
```

Events and Flags

On rebuilding the scrollbar you can get notified by 2 events ```javascript
$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 ```html
....
Bar shown: {{flag}}
```

Examples

See the example in the respository.
Bitdeli Badge