Skip to content

Instantly share code, notes, and snippets.

@mataspetrikas
Created April 4, 2012 10:45
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save mataspetrikas/2300296 to your computer and use it in GitHub Desktop.
Save mataspetrikas/2300296 to your computer and use it in GitHub Desktop.
Check if the DOM node is visible in the viewport
function elementInViewport(el) {
var rect = el.getBoundingClientRect()
return rect.top < (window.innerHeight || document.body.clientHeight) && rect.left < (window.innerWidth || document.body.clientWidth);
}
// and then you can use it:
alert(elementInViewport(document.getElementById('inner')));
// or
alert(elementInViewport($('#inner')[0]));
`
@ctbarna
Copy link

ctbarna commented Feb 22, 2013

This is the code I use:

return (
    (boundingRect.top >= 0 ||
        boundingRect.bottom <= window.innerHeight) &&
    (boundingRect.left >= 0 ||
        boundingRect.right <= window.innerWidth)
);

@ucavus
Copy link

ucavus commented Apr 29, 2013

Try this:

return rect.bottom > 0 &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ &&
        rect.top < (window.innerHeight || document.documentElement.clientHeight) /*or $(window).height() */;

Both previous solutions have the algebra wrong. Think about it, the top of an element can be above the top of viewport, but if the bottom of the element is showing (i.e. is below the top of the viewport), then it is still visible. Likewise for horizontal calculations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment