Instantly share code, notes, and snippets.

Embed
What would you like to do?
check if element is in viewport - vanilla JS. Use by adding a “scroll” event listener to the window and then calling isInViewport().
// Determine if an element is in the visible viewport
function isInViewport(element) {
var rect = element.getBoundingClientRect();
var html = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || html.clientHeight) &&
rect.right <= (window.innerWidth || html.clientWidth)
);
}
The above function could be used by adding a “scroll” event listener to the window and then calling isInViewport().
@rrapstine

This comment has been minimized.

Copy link

rrapstine commented Jul 18, 2016

I spent 4 hours looking for a solution to this problem. Thank you!

@ilblog

This comment has been minimized.

Copy link

ilblog commented Sep 28, 2016

Thx

@QwertyZW

This comment has been minimized.

Copy link

QwertyZW commented Dec 15, 2016

Nice, be sure to account for anchored elements/z-indices if you're copy pasting this

@Mezzenstein

This comment has been minimized.

Copy link

Mezzenstein commented Dec 31, 2016

Thank you!

@englishextra

This comment has been minimized.

Copy link

englishextra commented Mar 9, 2017

The drawback is that the whole element with its hight should be in viewport, not just some part of it.

@bresson

This comment has been minimized.

Copy link

bresson commented Mar 14, 2017

@englishextra: what if the element's height is longer than the viewport?

@englishextra

This comment has been minimized.

Copy link

englishextra commented Mar 27, 2017

@bresson make you browser window smaller in height and you target is an image that wil appear only part of it, the isInViewport will not trigger. But it will if the element is not hidden but has no height, say:

somewhere lower in your document:

<div id="disqus_thread"></div> //  it has no dynamic children appended yet
if (verge.inViewport(disqus_thread) // false
if (isInViewport(disqus_thread) // true

So the right name would be fitsIntoViewport

I recommend verge js lib which is small. But for now it wont say if something is in viewport if they are hidded with display none

@jsyzdek

This comment has been minimized.

Copy link

jsyzdek commented Apr 12, 2017

Works great- thanks!

@piotr-l

This comment has been minimized.

Copy link

piotr-l commented Feb 2, 2018

Thanks, it works perfectly.

@winrox

This comment has been minimized.

Copy link

winrox commented Feb 16, 2018

thanks so much!

@jorgeortega

This comment has been minimized.

Copy link

jorgeortega commented Mar 5, 2018

Thanks for this!

@tsimons

This comment has been minimized.

Copy link

tsimons commented May 3, 2018

Just wrote a similar version that only accounts for height, but returns true when any part of the element is in the viewport:

function isVisible (ele) {
  const { top, bottom } = ele.getBoundingClientRect();
  const vHeight = (window.innerHeight || document.documentElement.clientHeight);

  return (
    (top > 0 || bottom > 0) &&
    top < vHeight
  );
}
@abddayan

This comment has been minimized.

Copy link

abddayan commented Oct 11, 2018

thank you Jjmu15 and Tsimons. Your snippets each address different needs.

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