4
 |---header of html ----|
 |----------------------|
 |----------------------|
 |----------------------|
 |----------------------|  not displayed in browser
 |----------------------|
||----------------------|| <-----------
||----------------------||
||----------------------|| 
||----------------------|| browser, the part that human 
||----------------------|| actually see
||----------------------||
||----------------------|| <------------
 |----------------------| 
 |----------------------|  not displayed in browser
 |----------------------|                 
 |----------------------|                 
 |----------------------|                 
 |----------------------|                 
 |----------------------|                 
 |----------------------|
 |-----end of html------|

How to know if an element is actually appeared in browser and can seen by human's eye?

jquery's visible seems cannot do this.

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
Sato
  • 8,192
  • 17
  • 60
  • 115
  • You should trick with scroll and/or offset. – Bhojendra Rauniyar Jun 10 '14 at 08:45
  • 5min implementation: (looks like it works) function isVisible(DOMObj) { var visibleStart = window.scrollY; var visibleEnd = visibleStart + $(window).height(); var $dom = $(DOMObj); var objStart = $dom.offset().top; var objEnd = objStart + $dom.height(); if ((objStart > visibleStart && objStart < visibleEnd) || (objEnd > visibleStart && objEnd < visibleEnd)) { return true; } else { return false; } } – Tobi Jun 10 '14 at 08:58
  • @VisioN What existing question? – Steve Staple Mar 06 '18 at 16:57

0 Answers0