AngularJS Scroll Glue

• Simple
• With two-way data binding
• With one-way data binding
• Scroll Direction

Simple

To activate the scroll glue on an element just add the scroll-glue attribute.

<textarea scroll-glue></textarea>

---

With two-way data binding

If you pass a scope variable to the attribute, scroll-glue updates the variable to true when the glue is attached or to false if the glue is released and activates/deactivates the glue according to the variables value.

$scope.glued = true;

<textarea scroll-glue="glued"></textarea>

<input type="checkbox" ng-model="glued">

---

With one-way data binding

If you pass an expression that is not a scope variable, the scroll-glue is bound to the result of this expression.

<textarea scroll-glue="!empty"></textarea>

If you want to force one-way binding on a scope variable use double negation:

<textarea scroll-glue="!!empty"></textarea>

---

Scroll Direction

You can also specify the scroll direction by combining the following directives:

Top

<textarea scroll-glue-top="glued"></textarea>

Bottom

<textarea scroll-glue-bottom="glued"></textarea>

Left

<textarea scroll-glue-left="glued"></textarea>

Right

<textarea scroll-glue-right="glued"></textarea>