Directive to set a scope variable on scroll finish of a div/text area

I came across a problem today in which I had to enable some options (which are disabled on page load) once the text area/div which has a scroll attached to it has reached the end. Usually such are the requirements when you want the user to scroll through or read the complete text before he can continue with whatever hes doing. Since it might become a requirement for other projects as well, I decided to wrap it up inside a small and neat directive. Here is how to use it:

Using ukScroll directive in view

Using ukScroll directive in view


*By setting a variable, I mean setting it to a value true.

There are 2 simple steps to accomplish setting a variable from the directives parent scope once the scroll has reached its end:

  1. Place a uk-scroll directive on the textarea/div. This would place a scroll listener on the tag with the required logic.
  2. Provide the uk-scroll directive with a variable on the scope to set via the set-on-scroll-complete attribute.

Once the scroll has reached its end, the value of the variable on the scope, which is in the above case, “radBtn” would be set i.e. “radBtn = true”

Here is how the directive source looks like:

ukScroll Directive Source

ukScroll Directive Source


Hope this might come in handy. Keep the suggestions/recommendations coming in.

Source code can be found here.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s