Package Exports

inview-lite

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (inview-lite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

inView

Detect when element scrolled to view

Demo

https://lab.miguelmota.com/inview/demo/

Install

Available via npm

npm install inview

Usage

Basic example

var inview = InView(el, function(isInView) {
  if (isInView) {
    // do something
    // ...
  }
});

Example showing if visible top half or bottom half of screen

var inview = InView(el, function(isInView, data) {
  if (isInView) {
    if (data.elementOffsetTopInViewHeight < data.inViewHeight/2) {
      console.log('in view (top half)');
    } else {
      console.log('in view (bottom half)');
    }
  } 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)');
    }
  }
});

Destroy InView listeners

var inview = InView(el, function(isInView, data) {
  if (isInView) {
    // do something
    // ...

    this.destroy();
  }
})

// another way
inview.destroy();

Scroll callback parameters:

{boolean} isInView - is in view
{object} data - scroll data
{number} data.windowScrollTop - scrolled amount
{number} data.elementOffsetTop - element top offset
{number} data.inViewHeight - height of visible area
{number} data.elementOffsetTopInViewHeight - element top offset relative to height of visible area

https://lab.miguelmota.com/inview/docs

License

Released under the MIT License.