HTML, как определить, какие элементы видны?

Question

Я видел несколько решений, которые определяют, когда элемент виден в области просмотра во время прокрутки страницы, но я не видел таких элементов, которые содержатся в прокручиваемом контейнере div, как в примере здесь.

Как я могу обнаружить элементы, когда они прокручиваются в вид через прокручивающийся div? И в отличие от того, как бы я их обнаружил, если они выпадут из поля зрения. Во всех случаях элементы переполнения не спрятаны с самого начала.

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

Включает библиотеку jQuery на первой странице.

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(', ')); 
    }); 
}); 

Добавить в HTML для вывода результатов:

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

Это код, основанный на координатах объекта, ведьма пересчитывается на прокрутках события. Есть кое-что, что нужно знать. IE и, кажется, Opera учитывает ширину и высоту самих полос прокрутки, что требует настройки кода занавеса. Я просто предложил направление решения и не потратил много времени на отладку этого.

И все же, возможно, будет полезно следующее (из Jquery апи о смещение):

Примечание: Jquery не поддерживает получение координат смещения скрытых элементов или учета границ, поля, или набивка набор на корпусе элемент.

Answer 2

http://www.quirksmode.org/mobile/viewports.html обсуждает вопросы вокруг видовых, определения их размеров и расчет элементов ограничивающего относительно координат видовых экрана в. Часть 2 этого сообщения в блоге затем переходит в неявные видовые экраны в мобильных браузерах. Он не дает кода, который точно отвечает на ваш вопрос, но он определенно релевантен и заслуживает внимания.