HTML, how to determine which elements are visible?

Question

I saw several solutions that determine when an element is visible in the viewport while scrolling the page, but I have not seen those that do this for elements contained in a scrollable div container, as in the example here,

How would I detect elements when they scroll to a view through a scrollable div? And unlike how I would have discovered them, if they fall out of sight. In all cases, overflow elements are not hidden at first.

HTML

  <div id="mainContainer" class="main"> <div id="scrollContainer"class="scroller"> <div id="picturesContainer"class="holder"> <div id="pictureContainer1" class="picture position1"> pictureContainer1</div> <div id="pictureContainer2" class="picture position2"> pictureContainer2</div> <div id="pictureContainer3" class="picture position3"> pictureContainer3</div> <div id="pictureContainer4" class="picture position4"> pictureContainer4</div> <div id="pictureContainer5" class="picture position5"> pictureContainer5</div> <div id="pictureContainer6" class="picture position6"> pictureContainer6</div> <div id="pictureContainer7" class="picture position7"> pictureContainer7</div> <div id="pictureContainer8" class="picture position8"> pictureContainer8</div> <div id="pictureContainer9" class="picture position9"> pictureContainer9</div> </div> </div> </div> 

CSS

  .main{ position:absolute; top:0px; left:0px; height: 200px; width:200px; background-color: grey; border: 1px solid black; } .scroller{ position:absolute; top:0px; left:0px; height: 250px; width:250px; background-color: lightblue; border: 1px solid black; overflow: scroll; } .picture{ position:absolute; height: 200px; width: 200px; background-color: lightyellow; border: 1px solid black; } .position1{ top:0px; left:0px; } .position2{ top:0px; left:200px; } .position3{ top:0px; left:400px; } .position4{ top:200px; left:0px; } .position5{ top:200px; left:200px; } .position6{ top:200px; left:400px; } .position7{ top:400px; left:0px; } .position8{ top:400px; left:200px; } .position9{ top:400px; left:400px; } .holder{ position:absolute; top:0px; left:0px; width:600px; height:600px; background-color:lightgreen; } 

Answer 1

first enable the jQuery library on the page.

 function getObjDims(obj){ if (!obj) return false; var off = $(obj).offset(); var t = { top:off.top, left:off.left, width:$(obj).width(), height:$(obj).height() }; return {x1:t.left, y1:t.top, x2:t.left+t.width,y2:t.top+t.height} }; function testInside(pic,box){ var d=getObjDims(pic); return (box.x1<=d.x1 && box.y1<=d.y1 && box.x2>=d.x2 && box.y2>=d.y2)?1:-1; }; $(document).ready(function(){ var inside={}; var port=$('#scrollContainer'); var box=getObjDims(port); $(window).resize(function(){ box=getObjDims(port); }); $(port).scroll(function(){ var str=[]; $('.picture').each(function(i){ var oldState = inside[this.id]!=undefined?inside[this.id]:0; var newState = testInside(this,box); inside[this.id]=newState; if (oldState!=newState) switch (newState){ case 1:str.push(this.id);break;// go IN case -1: break;// go OUT } }); $('#picStatus').text(str.join(', ')); }); }); 

Add to HTML to output the results:

 <div style='margin-top:280px;'>Pictures in window (numbers):</div> <div id='picStatus'></div> 

This code based on object coordinates is recalculated for the scroll event. There is something you need to know. IE and Opera seem to take into account the width and height of the scroll bars themselves, which requires setting the curtain code. I just suggested a solution and did not spend much time debugging.

And yet, the following may be useful (from jquery api about offset):

Note. jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or indents set on the body of an element.

Answer 2

http://www.quirksmode.org/mobile/viewports.html discusses problems around viewports, determines their sizes and calculates the borders of elements relative to the coordinate frame of the viewport. Part 2 of this blog post then goes into implicit viewports in mobile browsers. It does not provide code that exactly answers your question, but it definitely matters and is worth reading.