A web component requestAnimationFrame based scroll watcher

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

Build Status Published on webcomponents.org

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

Install

Link to this version
ImportedReleased 13 July 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save mlunnay/alicorn-scroll-watcher"#1.0.2"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.2

Dependencies

  • polymer#Polymer/polymer#^2.0.0