in-view

A web component for checking if an element is in view using Intersection Observer by wrapping a HTML template tag.

Install

npm install --save @zicklepop/in-view

Resources

• Demo
• GitHub
• NPM

Properties

• data-rootMargin string, optional: CSS margin syntax to expand the outside area considered in view. (mdn)
• data-threshold float, optional: Sensitivity for how much of the element must be in view, written as a decimal representation of a percentage. (mdn)

Basic Usage

To work it only requires a template element around whatever you want to render when in view.

<in-view>
  <template>I show up when I'm in view!</template>
</in-view>