Angular module that triggers actions on scrolling to a point
HTML JavaScript
Latest commit dea1459 Jan 23, 2017 @princemaple committed on GitHub Merge pull request #19 from princemaple/greenkeeper-angular-1.6.1
Update angular to version 1.6.1 πŸš€

README.md

scroll-trigger

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.

Demo

Some demos. Scroll down slowly.

Usage

How to use can be found in tests

The tests are both tests and examples

See reference is at the end

Examples/Tests

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

Reference

<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