intersection-observer-element

Reflects contained elements visibility in attributes

View larger

Close

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

<intersection-observer-element>

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.

Links

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

Compatibility