Check if element is within viewport.
Convenient wrapper around viewprt supporting debounced listeners.
npm install element-within-viewport --save
import elementWithinViewport from 'element-within-viewport';
elementWithinViewport(document.querySelector('#jackie'), {
onEnter: (element) => {
// Element in viewport!
}
});
Check if element is within viewport and calls proper callback.
Type: Element
Element to check.
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. |
Destroy instance.
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)
});
Tested in Edge 15, Chrome 88 and Firefox 86, and should work in all modern browsers.
For automated tests, run npm run test:automated
(append :watch
for watcher
support).
MIT © Ivan Nikolić