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.

Show comment
Hide comment
@rrapstine

rrapstine Jul 18, 2016

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

rrapstine commented Jul 18, 2016

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

@ilblog

This comment has been minimized.

Show comment
Hide comment
@ilblog

ilblog commented Sep 28, 2016

Thx

@QwertyZW

This comment has been minimized.

Show comment
Hide comment
@QwertyZW

QwertyZW Dec 15, 2016

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

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.

Show comment
Hide comment
@Mezzenstein

Mezzenstein commented Dec 31, 2016

Thank you!

@englishextra

This comment has been minimized.

Show comment
Hide comment
@englishextra

englishextra Mar 9, 2017

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

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.

Show comment
Hide comment
@bresson

bresson Mar 14, 2017

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

bresson commented Mar 14, 2017

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

@englishextra

This comment has been minimized.

Show comment
Hide comment
@englishextra

englishextra 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

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.

Show comment
Hide comment
@jsyzdek

jsyzdek Apr 12, 2017

Works great- thanks!

jsyzdek commented Apr 12, 2017

Works great- thanks!

@thepele

This comment has been minimized.

Show comment
Hide comment
@thepele

thepele Feb 2, 2018

Thanks, it works perfectly.

thepele commented Feb 2, 2018

Thanks, it works perfectly.

@winrox

This comment has been minimized.

Show comment
Hide comment
@winrox

winrox Feb 16, 2018

thanks so much!

winrox commented Feb 16, 2018

thanks so much!

@jorgeortega

This comment has been minimized.

Show comment
Hide comment
@jorgeortega

jorgeortega Mar 5, 2018

Thanks for this!

jorgeortega commented Mar 5, 2018

Thanks for this!

@tsimons

This comment has been minimized.

Show comment
Hide comment
@tsimons

tsimons 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
  );
}

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.

Show comment
Hide comment
@abddayan

abddayan Oct 11, 2018

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

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