Directory

← Back

intersection-observer-element

Reflects contained elements visibility in attributes

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/moritonal/intersection-observer-element on 2019-05-22 ]

<intersection-observer-element>

Published on webcomponents.org

Set's visible to true when the viewport crosses the set threshold of the element.

<intersection-observer-element visible="{{visible}}">
    <div>  
        ...
    </div>
</intersection-observer-element>

Install

bower install --save intersection-observer-element

Options

thresholds

Default: [0.0, 0.25, 0.5, 0.75, 1.0]

The percentages across the element where an event is raised that the intersection has changed.

visibleLimit

Default: 0.5

The percentage whereby the element swaps between visible or not.

rootMargin

Default: 0px

Directly passed into IntersectionObserver class as rootMargin

Polyfills

This element uses the Intersection Observer Api, which whilst most modern browsers currently support, it is missing from iOS Safari. More detailed information can be found at CanIUse.

If you wish to support multiple browsers it's recommended you also use one of the Polyfills from here.

Developing

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

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
2018-04-11
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

intersection-observer-element - Vaadin Add-on Directory

Reflects contained elements visibility in attributes intersection-observer-element - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/moritonal/intersection-observer-element](https://github.com//moritonal/intersection-observer-element/blob/v1.0.8/README.md) on 2019-05-22 ]** # \ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Glitch0011/intersection-observer-element) Set's `visible` to true when the viewport crosses the set threshold of the element. ```
...
``` ## Install ``` bower install --save intersection-observer-element ``` ## Options ### thresholds Default: [0.0, 0.25, 0.5, 0.75, 1.0] The percentages across the element where an event is raised that the intersection has changed. ### visibleLimit Default: 0.5 The percentage whereby the element swaps between visible or not. ### rootMargin Default: 0px Directly passed into IntersectionObserver class as rootMargin ## Polyfills This element uses the Intersection Observer Api, which whilst most modern browsers currently support, it is missing from iOS Safari. More detailed information can be found at [CanIUse](https://caniuse.com/#search=intersection). If you wish to support multiple browsers it's recommended you also use one of the Polyfills from [here](https://github.com/w3c/IntersectionObserver/tree/gh-pages/polyfill). ## Developing ### Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally. ### Viewing Your Element ``` $ polymer serve ``` ### Running Tests ``` $ polymer test ``` Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
Online