Skip to content

Instantly share code, notes, and snippets.

@taimursaeed
Created March 5, 2019 09:30
Show Gist options
  • Save taimursaeed/10636c5331692fd95dedf04f6dc36ace to your computer and use it in GitHub Desktop.
Save taimursaeed/10636c5331692fd95dedf04f6dc36ace to your computer and use it in GitHub Desktop.
/*
Thanks to: https://gist.github.com/davidtheclark/5515733#gistcomment-2113205
*/
function isAnyPartOfElementInViewport(el) {
const rect = el.getBoundingClientRect();
// DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
// http://stackoverflow.com/questions/325933/determine-whether-two-date-ranges-overlap
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
return (vertInView && horInView);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment