on-intersect

on-intersect

Call back when an element intersects with another.

Usage

var intersectExists = require('on-intersect/exists')
var onViewport = require('on-intersect')
var html = require('bel')

var el = html`
  <h1 style="color: white">
    BEHOLD THE GOBLIN!
  </h1>
`

var main = html`
  <main>
    <div style="height: 110vh"></div>
    ${el}
    <div style="height: 110vh"></div>
  </main>
`

document.body.appendChild(main)

// observers should only be added _after_ the element is rendered on the DOM,
// else it displeases the browser emperors and they _will_ warn you
if (intersectExists()) {
  var stopObserving = onIntersect(el, onEnter, onExit)
}

function onEnter (entry) {
  console.log(entry.time)
  console.log(entry.rootBounds)
  console.log(entry.intersectionRect)
  console.log(entry.intersectionRatio)
  console.log(entry.target)

  document.body.setAttribute('style', 'background-color: green')
}

function onExit (entry) {
  document.body.setAttribute('style', 'background-color: white')
  stopObserving()
}

API

stopObserving = onViewport(elementOrObject, [onEnter|null], [onExit])

Call a callback when an element intersects with another. Defaults to document.body. The first argument can either be an HTML Node or an object. If it's an object it must contain a target which is an HTML node. Options can be:

• target: The element that is being observed
• root: The element that is used as the viewport for checking visiblity of the target. Defaults to the browser viewport.
• rootMargin: Margin around the root. Can have values similar to the css margin property: "10px 20px 30px 40px" (top, right, bottom, left). If the root element is specified % values can be used.
• threshold: Number or array of numbers to indicate at what % of visiblity of the target the observer should trigger. eg: trigger for every 25 percent that comes into view: [0, 0.25, 0.5, 0.75, 1]. Will call onEnter every time the threshold is passed. threshold defaults to 1.

stopObserving()

Unregister the observer

bool = intersectExists()

Check if window.InterSectionObserver exists

Installation

$ npm install on-intersect

See Also

• yoshuawuyts/nanoraf
• yoshuawuyts/nanocomponent
• yoshuawuyts/nanomorph
• yoshuawuyts/nanotick
• bendrucker/document-ready
• shama/on-load
• shama/bel

Further Reading

• MDN/Intersection_Observer_API

Authors

• Finn Pauls
• Yoshua Wuyts

License

MIT