function elementInViewport(myElement) {
const myElementHeight = myElement.offsetHeight;
const myElementWidth = myElement.offsetWidth;
const bounding = myElement.getBoundingClientRect();
if (
bounding.top >= -myElementHeight &&
bounding.left >= -myElementWidth &&
bounding.right <=
(window.innerWidth || document.documentElement.clientWidth) +
myElementWidth &&
bounding.bottom <=
(window.innerHeight || document.documentElement.clientHeight) +
myElementHeight
) {
return true;
} else {
return false;
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter