2.0.19 • Published 8 years ago

live-on-stage v2.0.19

Weekly downloads
12
License
MIT
Repository
github
Last release
8 years ago

Live on Stage

Deprecated: Please use React Intersection

High performance tracking of DOM elements entering and leaving the viewport.

Install

npm install live-on-stage --save

Use

Start tracking an element

Start tracking a DOM element by providing it to startTrackingElement. A second argument, options, is an optional object with event callbacks and other properties.

import { startTrackingElement } from 'live-on-stage';

const trackingId = startTrackingElement(document.querySelector('div'), options);

Options

  • onEnter: function: Fires when element enters the viewport (becomes visible). Opposite: onLeave
  • onLeave: function: Fires when element leaves the viewport (becomes non-visible). Opposite: onEnter
  • onBeginLeave: function: Fires when the element begins to leaves the viewport. Opposite: onCompleteEnter
  • onCompleteEnter: function: Fires when an element completely enters the viewport. Opposite: onBeginLeave
  • onMeasure: function: Fires when an element is measured - usually on tracking start or screen resize.
  • onScroll: function: Fires when the screen is scrolled.
  • buffer: number: Size, in pixels, to add to each side of the element's calculated bounding box.

Callbacks are provided one argument, elementData, which can be used to query the positional status of an element:

  • dom: HTMLElement: The DOM element as provided to startTrackingElement.
  • top, right, bottom, left: number: Absolute bounding box measurements relative to document.
  • isOffTop, isOffRight, isOffBottom, isOffLeft, isOffScreen: boolean: true when element is positioned off given viewport side.
  • isWithinTop, isWithinRight, isWithinBottom, isWithinLeft, isWithinScreen: boolean: true when element is completely within viewport side.

Stop tracking an element

import { stopTrackingElement } from 'live-on-stage';

stopTrackingElement(trackingId);

Manually check scroll position

import { manuallyCheckAll } from 'live-on-stage';

manuallyCheckAll();
2.0.19

8 years ago

2.0.18

8 years ago

2.0.17

9 years ago

2.0.16

9 years ago

2.0.15

9 years ago

2.0.14

9 years ago

2.0.13

9 years ago

2.0.12

9 years ago

2.0.11

9 years ago

2.0.10

9 years ago

2.0.9

9 years ago

2.0.8

9 years ago

2.0.7

9 years ago

2.0.6

9 years ago

2.0.5

9 years ago

2.0.4

9 years ago

2.0.3

9 years ago

2.0.2

9 years ago

2.0.1

9 years ago

2.0.0

9 years ago

1.6.0

9 years ago

1.5.0

9 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.0

10 years ago