intersection-observer-element | Vaadin

Reflects contained elements visibility in attributes

[ This description is mirrored from at on 2019-05-22 ]


Published on

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

<intersection-observer-element visible="{{visible}}">


bower install --save intersection-observer-element



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.


Default: 0.5

The percentage whereby the element swaps between visible or not.


Default: 0px

Directly passed into IntersectionObserver class as rootMargin


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.


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.


Link to this version
ImportedReleased 11 April 2018MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save moritonal/intersection-observer-element"#1.0.8"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.8


  • polymer#Polymer/polymer#^2.0.0