in-view

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

Resources

• melkat.dev demo

• melkat.dev repo

• melkat.dev npm

• text.tube demo

• source.tube repo

• source.tube 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>