Skip to content
This repository has been archived by the owner. It is now read-only.
Angular module that triggers actions on scrolling to a point
Branch: master
Clone or download
Latest commit 740dbbe Feb 7, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
src detect busy when registering Feb 24, 2016
.gitignore Add .gitignore Mar 22, 2015
LICENSE Initial commit Mar 22, 2015 add bower version badge Jan 7, 2016
gulpfile.js update build config Feb 24, 2016


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


<div scroll-trigger="doSomething()"></div>

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
You can’t perform that action at this time.