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

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:

Directives usage

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:

Directives source

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

Source code can be found here

This post is licensed under CC BY 4.0 by the author.