Angular module that triggers actions on scrolling to a point
0 people use it


npm version Bower version

Read the tests as How to use :)

Trigger actions on scroll to a point

This module is based on img-src-ondemand, the other module that I wrote some time ago to delay image loading to only when they appear on screen. Recently, I wanted to write a new infinite scroll library to replace the use of ngInfiniteScroll which I don't like so much. Reason being it requires you to pass a selector or a selector function as setup so the service can find the infinite scroll container. This doesn't work well if the container is somewhere in a route view. The container should be able to reach the service, so that doesn't matter where it's put, it can work. After some thought, I realized that the logic it requires here is already written in my previous library. Now, I extracted the logic and generalized it, so it can be used in a much wider range.


Some demos. Scroll down slowly.


How to use can be found in tests

The tests are both tests and examples

See reference is at the end


| Example / Test name | Functionality | |------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------| | test_img_src_ondemand | shows how to reproduce the functionality of img-src-ondemand module | | test_infinite_scroll | shows how to implement infinite scroll with this module | | test_scroll_to_animate | shows how to implement common animation trigger on scrolling to | | test_scroll_to_end | shows how to trigger the action at the end instead of at the beginning | | test_scroll_container | shows how to achieve the same effect with a container instead of window | | test_lazy_img_in_container | shows how to lazy load images in a container that is not window | | test_interval | shows how to check and trigger action more / less often | | test_offset | shows how to trigger action in advance / with delay in terms of screen position | | test_trigger_run | shows how to run the action once on load regardless of the screen position | | test_trigger_active | shows how to conditionally trigger action | | test_scope | shows scrollTrigger can access the scope on the element, and is able to call functions / retreive data from the scope | | test_multiple | | | test_scroll | |


Available Attributes

  • trigger-run: runs the trigger when the page is loaded regardless of the relative position of the element
  • trigger-at-end: instead of triggering when the top of the element enters the screen, trigger at the end
  • trigger-persist: do not remove the trigger (event listener) after it has been triggered
  • trigger-active: conditionally check screen position
  • scroll-container: instead of listening on window, listen on a specific container
  • scroll-trigger-id: manually assign a unique identifier

Available configuration

  • offset: gives you adjustable space
  • interval: gives you adjustable timing
comments powered by Disqus
This page was last updated almost 2 years ago.