Detect when element scrolled to view
Detect when element scrolled to view
https://lab.miguelmota.com/inview/demo/
npm install inview
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()
Constructor:
Scroll callback parameters:
Visualization: