scroll-trigger

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

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

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 11 months ago.