https://github.com/chrisyip/is-element-in-view
Detect if element is in view
https://github.com/chrisyip/is-element-in-view
Last synced: about 1 year ago
JSON representation
Detect if element is in view
- Host: GitHub
- URL: https://github.com/chrisyip/is-element-in-view
- Owner: chrisyip
- License: mit
- Created: 2016-12-21T18:41:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-30T05:53:59.000Z (over 9 years ago)
- Last Synced: 2025-05-10T07:03:15.925Z (about 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# is-element-in-view
Detect if element is in view.
```
npm install is-element-in-view
```
Use with module packer with `babel-preset-es2015`, e.g. `webpack`:
```
import isElementInView from 'is-element-in-view
```
With CommonJS:
```
const isElementInView = require('is-element-in-view/dist/is-element-in-view')
```
With `` tag:
```
<script src="node_modules/is-element-in-view/dist/is-element-in-view.umd.js"
```
## Usage
```
const elementInView = isElementInView(element)
/*
* returns
* {
* top: true,
* bottom: true,
* left: true,
* right: true,
* body: true,
* }
*/
```
```
if (!isElementInView(element).top) {
element.scrollIntoView()
}
```
### Options
`element`: target element.
`parentElement`: optional, accepts a HTML element, if presented, will use `parentElement.getBoundingClientRect()` as viewport, otherwise, use `window.innerHeight` and `window.innerWidth` instead.