Home/ Questions/Q 59663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T18:02:26+00:00

Is there an efficient way to tell if a DOM element (in an HTML

  • 0

Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)?

(The question refers to Firefox.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Update: Time marches on and so have our browsers. This technique is no longer recommended and you should use Dan’s solution if you do not need to support version of Internet Explorer before 7.

    Original solution (now outdated):

    This will check if the element is entirely visible in the current viewport:

    function elementInViewport(el) {   var top = el.offsetTop;   var left = el.offsetLeft;   var width = el.offsetWidth;   var height = el.offsetHeight;    while(el.offsetParent) {     el = el.offsetParent;     top += el.offsetTop;     left += el.offsetLeft;   }    return (     top >= window.pageYOffset &&     left >= window.pageXOffset &&     (top + height) <= (window.pageYOffset + window.innerHeight) &&     (left + width) <= (window.pageXOffset + window.innerWidth)   ); }

    You could modify this simply to determine if any part of the element is visible in the viewport:

    function elementInViewport2(el) {   var top = el.offsetTop;   var left = el.offsetLeft;   var width = el.offsetWidth;   var height = el.offsetHeight;    while(el.offsetParent) {     el = el.offsetParent;     top += el.offsetTop;     left += el.offsetLeft;   }    return (     top < (window.pageYOffset + window.innerHeight) &&     left < (window.pageXOffset + window.innerWidth) &&     (top + height) > window.pageYOffset &&     (left + width) > window.pageXOffset   ); }
    • 0