2.0.10 • Published 8 years ago

ng-scroll-glue v2.0.10

Weekly downloads
567
License
MIT
Repository
github
Last release
8 years ago

ng-scroll-glue Build Status

An AngularJS directive that automatically scrolls to the bottom of an element on changes in its scope.

##Important This is a fork of Lukas Wegmann's Angular Scroll Glue. I haven't touched the module's functionality, only the module's name.

If you're switching from Lukas' version you must change the directive name from luegg.directives to ngScrollGlue.

There's also a minified version available in the dist folder.

Install

Bower

$ bower install --save ng-scroll-glue

Usage

  1. Insert the script into your HTML:

    ...
    <script src="/components/ng-scroll-glue/dist/scrollglue.js"></script>
    ...

    Or the minified version for production:

    ...
    <script src="/components/ng-scroll-glue/dist/scrollglue.min.js"></script>
    ...
  2. Import the directive into your Angular app:

    /* Add `ngScrollGlue` to your module's dependencies */
    angular.module('App', [
    	//...
    	'ngScrollGlue'
    ]);
  3. Add the directive to your html:

    <div scroll-glue>
    	<!-- Content here will be "scroll-glued" -->
    </div>

The scroll-glueattribute glues the content to the bottom by default. You can set other directions with the attribute name, like scroll-glue-bottom, scroll-glue-top, scroll-glue-left or scroll-glue-right.

If you assign a variable name to the scroll-glue attribute that is present in the scope and it's true, it'll start glued to the glue direction defined in the attribute name:

// ...
$scope.glued = true;
// ...
<div scroll-glue="glued">
	<!-- Content here will start and will be "scroll-glued" -->
</div>

Example

Visit example page