Check if element is visible on screen

Question

Possible Duplicate    jQuery - Check if element is visible after scroling       I m trying to determine if an element is visible on screen  In order to to this  I m trying to find the element s vertical position using offsetTop  but the value returned is not correct  In this case  the element is not visible unless you scroll down  But despite of this  offsetTop returns a value of 618 when my screen height is 703  so according to offsetTop the element should be visible   The code I m using looks like this   function posY obj      var curtop   0     if  obj offsetParent           while 1              curtop    obj offsetTop         if   obj offsetParent                   break                 obj   obj offsetParent            else if  obj y              curtop    obj y           return curtop      Thank you in advance

User · Answer

Could you use jQuery  since it s cross-browser compatible   function isOnScreen element        var curPos   element offset        var curTop   curPos top      var screenHeight     window  height        return  curTop  gt  screenHeight    false   true      And then call the function using something like   if isOnScreen     myDivId          Code here

User · Answer

--- Shameless plug --- I have added this function to a library I created vanillajs-browser-helpers  https   github com Tokimon vanillajs-browser-helpers blob master inView js ------------------------------- Well BenM stated  you need to detect the height of the viewport   the scroll position to match up with your top position  The function you are using is ok and does the job  though its a bit more complex than it needs to be  If you don t use jQuery then the script would be something like this  function posY elm        var test   elm  top   0       while   test  amp  amp  test tagName toLowerCase        quot body quot             top    test offsetTop          test   test offsetParent             return top     function viewPortHeight         var de   document documentElement       if   window innerWidth        return window innerHeight        else if  de  amp  amp   isNaN de clientHeight          return de clientHeight             return 0     function scrollY         if  window pageYOffset     return window pageYOffset        return Math max document documentElement scrollTop  document body scrollTop      function checkvisible  elm         var vpH   viewPortHeight       Viewport Height         st   scrollY       Scroll Top         y   posY elm            return  y  gt   vpH   st       Using jQuery is a lot easier  function checkVisible  elm  evalType         evalType   evalType     quot visible quot        var vpH     window  height       Viewport Height         st     window  scrollTop       Scroll Top         y     elm  offset   top          elementHeight     elm  height         if  evalType      quot visible quot   return   y  lt   vpH   st    amp  amp   y  gt   st - elementHeight         if  evalType      quot above quot   return   y  lt   vpH   st        This even offers a second parameter  With  quot visible quot   or no second parameter  it strictly checks whether an element is on screen  If it is set to  quot above quot  it will return true when the element in question is on or above the screen  See in action  http   jsfiddle net RJX5N 2  I hope this answers your question  -- IMPROVED VERSION-- This is a lot shorter and should do it as well  function checkVisible elm      var rect   elm getBoundingClientRect      var viewHeight   Math max document documentElement clientHeight  window innerHeight     return   rect bottom  lt  0    rect top - viewHeight  gt   0      with a fiddle to prove it  http   jsfiddle net t2L274ty 1  And a version with threshold and mode included  function checkVisible elm  threshold  mode      threshold   threshold    0    mode   mode     visible      var rect   elm getBoundingClientRect      var viewHeight   Math max document documentElement clientHeight  window innerHeight     var above   rect bottom - threshold  lt  0    var below   rect top - viewHeight   threshold  gt   0     return mode      above    above    mode      below    below    above  amp  amp   below      and with a fiddle to prove it  http   jsfiddle net t2L274ty 2

[javascript] Check if element is visible on screen

Examples related to javascript

Examples related to position

Examples related to offset