inView

Detect when element scrolled to view

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:

License

MIT