
Security News
ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
dom-oninviewport
Advanced tools
Know when a DOM element is inside the viewport. You can use this for lazily loading images, infinite scroll, user tracking, etc.
Sports an UMD definition.
Call onInViewport
with an element and a callback. The callback gets called (once and only once) when the element is in the viewport.
If the element is already in the viewport, onInViewport is called immediately.
onInViewport(document.getElementById('myElement'), function () {
// Infinite scroll, lazy load, whatever!
})
To check if an element is in the viewport, use onInViewport.isIn.
onInViewport.isIn(myElement); // -> true if it's inside the viewport, false otherwise.
You can force onInViewport to reconsider things. If you have something which may push new things onto the screen without the user actually scrolling (such as a slider), you may want to tell onInViewport that the scroll changed, so it can recalculate whether the elements are on the screen or not.
To fake a user-initiated scroll, call onInViewport.onScroll. This is throttled (because browsers send a lot of scroll and resize events), so don't worry about calling it lots of times.
onInViewport.isIn = function(elm) { return Boolean }
The default implementation is as follows:
onInViewport.isIn = function isIn(elm) {
elm = elm.getBoundingClientRect()
return elm.right > 0
&& elm.bottom > 0
&& elm.top < document.documentElement.clientHeight
&& elm.left < document.documentElement.clientWidth
}
Copy and paste this to your code and add some conditions so that onInViewport knows how to deal with your sliders, modals, maps and whatever.
FAQs
require('dom-oninviewport')(elm, callback)
The npm package dom-oninviewport receives a total of 0 weekly downloads. As such, dom-oninviewport popularity was classified as not popular.
We found that dom-oninviewport demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.