# inView
> Detect when element scrolled to view
[](https://raw.githubusercontent.com/miguelmota/inview/master/LICENSE) [](https://travis-ci.org/miguelmota/inview) [](https://david-dm.org/miguelmota/inview) [](http://badge.fury.io/js/inview)
## Demo
[https://lab.miguelmota.com/inview/demo/](https://lab.miguelmota.com/inview/demo/)
## Install
```bash
npm install inview
```
## Getting started
Basic example
```javascript
var inview = InView(el, function(isInView) {
if (isInView) {
// do something
// ...
}
});
```
Example showing if visible top half or bottom half of screen
```javascript
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
```javascript
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](LICENSE)