element-within-viewport

Check if element is within viewport.

Convenient wrapper around viewprt supporting debounced listeners.

Install

npm install element-within-viewport --save

Usage

import elementWithinViewport from 'element-within-viewport';

elementWithinViewport(document.querySelector('#jackie'), {
	onEnter: (element) => {
		// Element in viewport!
	}
});

API

elementWithinViewport(element, options)

Check if element is within viewport and calls proper callback.

element

Type: Element

Element to check.

options

Type: object

| Property | Type | Default value | Description | | --------------------- | ---------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | threshold | number | 0 | Positive value in pixels which will signal plugin to check for element presence earlier in document. | | scrollResizeHandler | Function | (handler) => handler | Window scroll and resize event handler. Useful if you want to use throttle or debounce methods on those events. Should return new handler (original or wrapped). | | onEnter | Function | () => {} | Callback to execute if element is within viewport. | | onExit | Function | () => {} | Callback to execute if element exits viewport. | | once | boolean | false | If true, will call onEnter only once. |

instance.destroy()

Destroy instance.

FAQ

Throttling and debouncing scroll and resize event

If you want to throttle or debounce scroll and resize events, modify handler with scrollResizeHandler property.

import { debounce } from 'throttle-debounce';

elementWithinViewport(document.querySelector('#jackie'), {
	scrollResizeHandler: (handler) => debounce(300, handler)
});

Browser support

Tested in Edge 15, Chrome 88 and Firefox 86, and should work in all modern browsers.

Test

For automated tests, run npm run test:automated (append :watch for watcher support).

License

MIT © Ivan Nikolić