alicorn-scroll-watcher

A web component requestAnimationFrame based scroll watcher

View larger

Close

[ This description is mirrored from README.md at github.com/mlunnay/alicorn-scroll-watcher on 2019-05-22 ]

Demo and API docs

<alicorn-scroll-watcher>

alicorn-scroll-watcher 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.

Installation

Bower

bower install alicorn-scroll-watcher --save

NPM

npm install alicorn-scroll-watcher

Yarn

yarn add alicorn-scroll-watcher

Import

<link rel="import" href="../../alicorn-scroll-watcher/alicorn-scroll-watcher.html">

Usage

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

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.

<link rel="import" href="../../alicorn-scroll-watcher/alicorn-scroll-watcher-mixin.html">
<style>
  class MyElement extends AlicornScrollWatcherMixin(PolymerElement) {
    //...
    _scrollHandler() {
      //...
    }
  }
</style>

History

v1.0.0 Initial version

License

MIT License © Michael Lunnay

Links

• GitHub Homepage
• View on GitHub
• Issue tracker
• Online Demo
• Documentation

Compatibility