javascript - Check if element is partially in viewport -

i'm trying determine if element partially or fully in viewport.

i've found determine if element in view kept getting confused when trying determine partial visibility. don't want use jquery.

basically, idea there element on page out of view. once user scrolls element view, partially, should trigger event. i'll handle event trigger binding onscroll event. need detection work properly.

function isinviewport(element) {     var rect = element.getboundingclientrect();     var html = document.documentelement;     return (         rect.top >= 0 &&         rect.left >= 0 &&         rect.bottom <= (window.innerheight || html.clientheight) &&         rect.right <= (window.innerwidth || html.clientwidth)     ); } 

any appreciated!

you need solution based on element.offsettop, element.offsetleft, element.offsetheight, element.offsetwidth, window.innerwidth , window.innerheight

(depending on situation, might want take scrolling position consideration)

function isinviewport(element){    if(element.offsettop<window.innerheight &&          element.offsettop>-element.offsetheight       && element.offsetleft>-element.offsetwidth       && element.offsetleft<window.innerwidth){        return true;      } else {                return false;      }  }        function test(){    alert(isinviewport(document.getelementbyid("elem"))?"yes":"no");   }

#elem{width: 20px; height: 20px; background: red; }  #elem{position: absolute;top: -9px;left: 600px;}

    <div id="elem"></div>      <button onclick="test()">check</button>