Directory

← Back

alicorn-scroll-watcher

A web component requestAnimationFrame based scroll watcher

Author

Contributors

Rating

[ 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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
Released
2017-07-13
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent
Online