<in-view>

Install

npm install --save @zicklepop/in-view

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 rendered <time-loaded></time-loaded> ago
  </button>
</in-view>

Scrollable Box Demo

The box below is scrollable, scroll down to watch it render when it comes in to view.