← Back

alicorn-scroll-watcher

A web component requestAnimationFrame based scroll watcher

Author

Contributors

Rating

<alicorn-scroll-watcher>

Name: alicorn-scroll-watcher
Availability: InStock
Rating: 4 (106 reviews)
Author: mlunnay

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

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

alicorn-scroll-watcher - Vaadin Add-on Directory

A web component requestAnimationFrame based scroll watcher

**[ This description is mirrored from README.md at [github.com/mlunnay/alicorn-scroll-watcher](https://github.com//mlunnay/alicorn-scroll-watcher/blob/v1.0.2/README.md) on 2019-05-22 ]** [![Build Status](https://travis-ci.org/mlunnay/alicorn-scroll-watcher.svg?branch=master)](https://travis-ci.org/mlunnay/alicorn-scroll-watcher) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/mlunnay/alicorn-scroll-watcher) _[Demo and API docs](https://www.webcomponents.org/element/mlunnay/alicorn-scroll-watcher)_ # <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 ```bash bower install alicorn-scroll-watcher --save ``` ### NPM ```bash npm install alicorn-scroll-watcher ``` ### Yarn ```bash yarn add alicorn-scroll-watcher ``` ## Import ```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. ```html ``` ## History v1.0.0 Initial version ## License [MIT](https://cdn.rawgit.com/mlunnay/alicorn-scroll-watcher/9cc23971/LICENSE.txt) License © Michael Lunnay

Directory