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.

rrapstine commented Jul 18, 2016

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

@ilblog

This comment has been minimized.

ilblog commented Sep 28, 2016

Thx

@QwertyZW

This comment has been minimized.

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.

Mezzenstein commented Dec 31, 2016

Thank you!

@englishextra

This comment has been minimized.

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.

bresson commented Mar 14, 2017

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

@englishextra

This comment has been minimized.

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.

jsyzdek commented Apr 12, 2017

Works great- thanks!

@piotr-l

This comment has been minimized.

piotr-l commented Feb 2, 2018

Thanks, it works perfectly.

@winrox

This comment has been minimized.

winrox commented Feb 16, 2018

thanks so much!

@jorgeortega

This comment has been minimized.

jorgeortega commented Mar 5, 2018

Thanks for this!

@tsimons

This comment has been minimized.

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.

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