Demo and API docs

<alicorn-scroll-watcher-p3>

alicorn-scroll-watcher-p3 provides a mixin and custom element that generate events based on its position inside the parent document, or a specified target element. For performance it uses requestAnimationFrame, over scroll events.

Converted to Polymer 3 from the original mlunnay/alicorn-scroll-watcher

Installation

NPM

npm install alicorn-scroll-watcher-p3

Yarn

yarn add alicorn-scroll-watcher-p3

Import

import 'alicorn-scroll-watcher-p3';

Usage

The alicorn-scroll-watcher-p3 element fires events for when it enters or exits the target viewport.

<alicorn-scroll-watcher on-enter-viewport="_loadMoreData"></alicorn-scroll-watcher>

Events

viewport-state-changed

This fires when any of the other events fire.

enter-viewport

This fires when any part of the element enters the target viewport.

fully-enter-viewport

This fires when all of the element is fully inside the target viewport.

exit-viewport

This fires when all of the element has exited the target viewport.

partially-exit-viewport

This fires when any part of the element has exited the target viewport.

Mixin

A mixin class AlicornScrollWatcherMixin can be extended by custom elements. The _scrollHandler method is called whenever the target viewport changed and can be overridden to add scroll logic.

import {AlicornScrollWatcherMixin} from 'alicorn-scroll-watcher-p3/alicorn-scroll-watcher-mixin';
 
class MyElement extends AlicornScrollWatcherMixin(PolymerElement) {
//...
    _scrollHandler() {
      //...
    }
}

History

v1.0.0 Initial version

License

MIT License © Michael Lunnay