Element-within-viewport NPM

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)
});