princemaple / scroll-trigger

Angular module that triggers actions on scrolling to a point

scroll-trigger

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.

• Img Src Ondemand replicate
• Infinite Scroll implementation
• Scroll to animate

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

scroll-trigger's Issues

Work with fixed container

e.scrollHeight, e.scrollTop

How to lazy load images inside scroll container?

Is there a way to define another container element other than "window" (default one)? I have a list of images inside a scrolling div, but scroll-trigger is taking into account only window scrolls.

I don't want to load the list items progressively (like an infinite scroll), I just want to lazy load images inside my list.

Conditionally trigger action

• action could return a promise?
• through an attribute

Trigger ignores trigger-active and fires during register

The register method doesn't evaluate item.busy. So item.action is called regardless of trigger-active value. It seems that adding ... && !item.busy() to the if before item.action() fixes that.

add infinite scroll example / test

Add test scroll to animate

Does not work with browserify out of the box

Hi. Would be great if following line was added to package.json:

"main": "dist/scroll-trigger.js",

It makes it compatible with browserify.