# element-inview > Get notified when a DOM element enters or exits the viewport. Latest version **0.1.0** (published 2016-12-04) · MIT license · 0 weekly downloads ## Install ```sh npm install element-inview pnpm add element-inview yarn add element-inview bun add element-inview ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0 | | Published | 2016-12-04 | | First published | 2016-12-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 4600 | | Author | Robert Jefe Lindstaedt | | Maintainers | eljefederodeodeljefe | ## Links - npm: https://www.npmjs.com/package/element-inview - Repository: https://github.com/camwiegert/in-view - Homepage: https://eljefedelrodeodeljefe.github.io/element-inview - Issues: https://github.com/camwiegert/in-view/issues - npm.io page: https://npm.io/package/element-inview ## Recent versions - 0.1.0 (latest) — 2016-12-04 ## README # element-inview > Get notified when a DOM element enters or exits the viewport. Largely basd on [in-view](https://github.com/camwiegert/in-view) [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](http://standardjs.com) --- ## Installation ```sh npm install --save element-inview ``` --- ## Basic Usage With `element-inview`, you can register handlers that are called when an element **enters** or **exits** the viewport. Each handler receives one element, the one entering or exiting the viewport, as its only argument. ```js inView('.someSelector') .on('enter', doSomething) .on('exit', el => { el.style.opacity = 0.5; }); ``` --- ## API `element-inview` maintains a separate handler registry for each set of elements captured with `inView()`. Each registry exposes the same four methods. `element-inview` also exposes four top-level methods. (`is`, `offset`, `threshold`, `test`). ### inView(\).on(\, \) > Register a handler to the elements selected by `selector` for `event`. The only events `element-inview` emits are `'enter'` and `'exit'`. > ```js > inView('.someSelector').on('enter', doSomething); > ``` ### inView(\).once(\, \) > Register a handler to the elements selected by `selector` for `event`. Handlers registered with `once` will only be called once. > ```js > inView('.someSelector').once('enter', doSomething); > ``` ### inView.is(\) > Check if `element` is in the viewport. > ```js > inView.is(document.querySelector('.someSelector')); > // => true > ``` ### inView.offset(\) > By default, `element-inview` considers something in viewport if it breaks any edge of the viewport. This can be used to set an offset from that edge. For example, an offset of `100` will consider elements in viewport if they break any edge of the viewport by at least `100` pixels. `offset` can be a positive or negative integer. > ```js > inView.offset(100); > inView.offset(-50); > ``` > Offset can also be set per-direction by passing an object. > ```js > inView.offset({ > top: 100, > right: 75, > bottom: 50, > left: 25 > }); > ``` ### inView.threshold(\) > Set the ratio of an element's height **and** width that needs to be visible for it to be considered in viewport. This defaults to `0`, meaning any amount. A threshold of `0.5` or `1` will require that half or all, respectively, of an element's height and width need to be visible. `threshold` must be a number between `0` and `1`. > ```js > inView.threshold(0); > inView.threshold(0.5); > inView.threshold(1); > ``` ### inView.test(\) > Override `element-inview`'s default visibility criteria with a custom function. This function will receive the element and the options object as its only two arguments. Return `true` when an element should be considered visible and `false` otherwise. > ```js > inView.test((el, options) => { > // ... > }); > ``` ### inView(\).check() > Manually check the status of the elements selected by `selector`. By default, all registries are checked on `window`'s `scroll`, `resize`, and `load` events. > ```js > inView('.someSelector').check(); > ``` ### inView(\).emit(\, \) > Manually emit `event` for any single element. > ```js > inView('.someSelector').emit('exit', document.querySelectorAll('.someSelector')[0]); > ``` --- ## Browser Support **`element-inview` supports all modern browsers and IE9+.** As a small caveat, `element-inview` utilizes [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to check the visibility of registered elements after a DOM mutation. If that's functionality you need in IE9-10, consider using a [polyfill](https://github.com/webcomponents/webcomponentsjs/blob/master/src/MutationObserver/MutationObserver.js). --- ## Performance Any library that watches scroll events runs the risk of degrading page performance. To mitigate this, currently, `element-inview` only registers a single, throttled (maximum once every 100ms) event listener on each of `window`'s `load`, `resize`, and `scroll` events and uses those to run a check on each registry. ### Utilizing IntersectionObserver There's an emerging browser API, [`IntersectionObserver`](https://wicg.github.io/IntersectionObserver/), that aims to provide developers with a performant way to check the visibility of DOM elements. Going forward, `element-inview` will aim to delegate to `IntersectionObserver` when it's supported, falling back to polling only when necessary. --- **License** [MIT](https://opensource.org/licenses/MIT) --- _Source: https://npm.io/package/element-inview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._