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

commented Jun 2, 2017

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

@StokeMasterJack

This comment has been minimized.

Copy link

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

commented Mar 9, 2018

Thanks very much

@narenderv7

This comment has been minimized.

Copy link

commented May 2, 2018

Awesome, worked like a charm

@ezeikel

This comment has been minimized.

Copy link

commented May 24, 2018

Great. Thank you

@jeffreyhshapiro

This comment has been minimized.

Copy link

commented Jul 24, 2018

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

@qluqua

This comment has been minimized.

Copy link

commented Aug 8, 2018

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

@vineetkumar1511

This comment has been minimized.

Copy link

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

commented Oct 11, 2018

nice!
thanks.

@jeremycoder

This comment has been minimized.

Copy link

commented Nov 26, 2018

Excellent work! Thank you very much!

@emrecamasuvi

This comment has been minimized.

Copy link

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

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

commented Feb 26, 2019

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

@audunolsen

This comment has been minimized.

Copy link

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

commented Apr 4, 2019

@audunolsen, awesome!

@dynamic75

This comment has been minimized.

Copy link

commented Apr 24, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.