ng-scrollbar

WebJar for ng-scrollbar

License	MIT
GroupId	org.webjars.npm
ArtifactId	ng-scrollbar
Last Version	0.0.8
Release Date	Oct 26, 2015
Type	jar
Description	ng-scrollbar WebJar for ng-scrollbar
Project URL	http://webjars.org
Source Code Management	https://github.com/asafdav/ng-scrollbar

Download ng-scrollbar

Filename	Size
ng-scrollbar-0.0.8.pom
ng-scrollbar-0.0.8.jar	20 KB
ng-scrollbar-0.0.8-sources.jar	22 bytes
ng-scrollbar-0.0.8-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/ng-scrollbar/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>ng-scrollbar</artifactId>
    <version>0.0.8</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/ng-scrollbar/
implementation 'org.webjars.npm:ng-scrollbar:0.0.8'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/ng-scrollbar/
implementation ("org.webjars.npm:ng-scrollbar:0.0.8")

Apache Buildr

'org.webjars.npm:ng-scrollbar:jar:0.0.8'

Apache Ivy

<dependency org="org.webjars.npm" name="ng-scrollbar" rev="0.0.8">
  <artifact name="ng-scrollbar" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='ng-scrollbar', version='0.0.8')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "ng-scrollbar" % "0.0.8"

Leiningen

[org.webjars.npm/ng-scrollbar "0.0.8"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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 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>

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

Versions

Version
0.0.8 Oct 26, 2015