InView

Global

Methods

InView(element, scrollCallback) → {HTMLElement}

Create an InView instance.
Parameters:
Name Type Description
element HTMLElement element to detect when scrolled to view
scrollCallback scrollCallback callback function fired on scroll event
Source:
Returns:
- element
Type
HTMLElement
Example
var el = document.querySelector('.item');

var InView = InView(el, function(isInView, data) {
  if (isInView) {
    console.log('in view');
  } else {
    if (data.windowScrollTop - (data.elementOffsetTop - data.inViewHeight) > data.inViewHeight) {
      console.log('not in view (scroll up)');
    } else {
      console.log('not in view (scroll down)');
    }
  }
});

Type Definitions

scrollCallback(isInView, data)

InView callback
Parameters:
Name Type Description
isInView boolean is in view
data object scroll data
Properties
Name Type Description
windowScrollTop number scrolled amount
elementOffsetTop number element top offset
inViewHeight number height of visible area
elementOffsetTopInViewHeight number element top offset relative to height of visible area
Source: