Skip to content
This repository has been archived by the owner on May 6, 2021. It is now read-only.

miguelmota/inview

Repository files navigation


logo


inView

Detect when element scrolled to view

License Build Status dependencies Status NPM version

Demo

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

Install

npm install inview

Getting started

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()

Documentation

Constructor:

  • InView(element, callback)

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

Visualization:

diagram

License

MIT