Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript: Is element in viewport?
/*
No jQuery necessary.
Thanks to Dan's StackOverflow answer for this:
http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
*/
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document. documentElement.clientWidth)
);
}
@StokeMasterJack

This comment has been minimized.

Copy link

@StokeMasterJack StokeMasterJack commented Jun 2, 2017

This seem to be isOneHundredPercentOfElementInViewport(). I need isAnyPartOfElementInViewport().

@StokeMasterJack

This comment has been minimized.

Copy link

@StokeMasterJack StokeMasterJack commented Jun 2, 2017

Here is isAnyPartOfElementInViewport from that same stackoverflow thread:

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);
}
@jerryni

This comment has been minimized.

Copy link

@jerryni jerryni commented Mar 9, 2018

Thanks very much

@narenderv7

This comment has been minimized.

Copy link

@narenderv7 narenderv7 commented May 2, 2018

Awesome, worked like a charm

@ezeikel

This comment has been minimized.

Copy link

@ezeikel ezeikel commented May 24, 2018

Great. Thank you

@jeffreyhshapiro

This comment has been minimized.

Copy link

@jeffreyhshapiro jeffreyhshapiro commented Jul 24, 2018

This is awesome- suited my needs perfectly. Thank you!

@qluqua

This comment has been minimized.

Copy link

@qluqua qluqua commented Aug 8, 2018

Thank you sir, isAnyPartOfElementInViewport() works fine for me.

@vineetkumar1511

This comment has been minimized.

Copy link

@vineetkumar1511 vineetkumar1511 commented Aug 16, 2018

what if the element inside iframe and one of its parent having scale 70%.

@tsarawoot

This comment has been minimized.

Copy link

@tsarawoot tsarawoot commented Oct 11, 2018

nice!
thanks.

@jeremycoder

This comment has been minimized.

Copy link

@jeremycoder jeremycoder commented Nov 26, 2018

Excellent work! Thank you very much!

@emrecamasuvi

This comment has been minimized.

Copy link

@emrecamasuvi emrecamasuvi commented Jan 7, 2019

well, the first code didnt work for me.
@StokeMasterJack 's code did work though ( isAnyPartOfElementInViewport )
Thank you.

@simon1tan

This comment has been minimized.

Copy link

@simon1tan simon1tan commented Jan 12, 2019

Doesn't work with overflowed elements when element scrolls out of view, both these functions return true.

@FireGrace

This comment has been minimized.

Copy link

@FireGrace FireGrace commented Feb 26, 2019

Bit of a mind-bender but is works.
Thx @StokeMasterJack.

@audunolsen

This comment has been minimized.

Copy link

@audunolsen audunolsen commented Mar 4, 2019

I needed a vertical only version of @StokeMasterJack's function, and wanted to rewrite it to be as short as possible. Not pretty, but still handy!

const isInViewport = (e, {top:t, height:h} = e.getBoundingClientRect()) => t <= innerHeight && t + h >= 0;
@souljorje

This comment has been minimized.

Copy link

@souljorje souljorje commented Apr 4, 2019

@audunolsen, awesome!

@dynamic75

This comment has been minimized.

Copy link

@dynamic75 dynamic75 commented Apr 24, 2019

Just what I needed to use. @StokeMasterJack Thank you!

@benzaremean

This comment has been minimized.

Copy link

@benzaremean benzaremean commented Jul 31, 2019

Thanks for this

@felipefgoncalves

This comment has been minimized.

Copy link

@felipefgoncalves felipefgoncalves commented Aug 16, 2019

Could someone please write this @audunolsen version without arrow function? Because I don't understand well this format. Thank you!

@felipefgoncalves

This comment has been minimized.

Copy link

@felipefgoncalves felipefgoncalves commented Aug 16, 2019

If someone explain how I can modify this function with my selector I will be very grateful.
I need to know if a specific tag is in the viewport for triggering on Google Tag Manager.

@Magiccwl

This comment has been minimized.

Copy link

@Magiccwl Magiccwl commented Aug 21, 2019

Should we consider about el.style.display !== 'none' ?

function isElementInViewport(el) {
  if (el.style.display === 'none') return false
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document. documentElement.clientWidth)
  );
}
@Troy-Yang

This comment has been minimized.

Copy link

@Troy-Yang Troy-Yang commented Jan 17, 2020

it won't work if the element is coming from top, if half coming by scroll up, in this case, the top is nagetive, but the bottom is positive.

width: 300 height: 300 top: -255.03125 right: 827.03125 bottom: 44.96875 left: 527.03125

@Mistovic

This comment has been minimized.

Copy link

@Mistovic Mistovic commented Jan 31, 2020

hello guys, JS is new thing to me. Can someone please explain me what does (el) represent in this script? Because it is not mentioned anywhere else in code but on the beginning.

@binzorellino

This comment has been minimized.

Copy link

@binzorellino binzorellino commented Jan 31, 2020

Hello Mistovic,
The (el) parameter is the DOM element that has been passed to the function to check if it is in the viewport or not yet.

@Mistovic

This comment has been minimized.

Copy link

@Mistovic Mistovic commented Jan 31, 2020

Hello Mistovic,
The (el) parameter is the DOM element that has been passed to the function to check if it is in the viewport or not yet.
Hello, and thank you for a reply.

So basically, we created a new element (el) with boundingClientRect() and gave him coordinates (or size) with return (top, left, bottom, right).
is that understood well?

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