HTML ¿cómo saber qué elementos son visibles?

Question

He visto varias soluciones que determinan cuándo un elemento es visible en la ventana mientras se desplaza por la página, pero no he visto ninguna que haga esto para los elementos que están contenidos en un contenedor de desplazamiento div como en el ejemplo aquí.

¿Cómo puedo detectar los elementos a medida que se desplazan a la vista a través de la div deslizante? Y, por el contrario, ¿cómo los detectaría si se perdieran de vista? En todos los casos, los elementos de desbordamiento no están ocultos desde el principio.

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

incluyen la biblioteca jQuery en la página primero.

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

Añadir en HTML para la salida de resultados:

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

Se basa en código de coordenadas del objeto, bruja se vuelven a calcular en caso de desplazamiento. Hay algunas cosas que debes saber IE y, parece ser, Opera tiene en cuenta el ancho y la altura de las barras de desplazamiento en sí, que exige el ajuste del código de la cortina. Acabo de recomendar la dirección de la solución y no pasé mucho tiempo para depurar esto.

Y, sin embargo, tal vez sea útil siguiente (de API jQuery sobre offset):

Nota: jQuery no soporta conseguir las coordenadas de desplazamiento del ocultas elementos y contabilidad de las fronteras, márgenes, o relleno conjunto en el cuerpo elemento.

Answer 2

http://www.quirksmode.org/mobile/viewports.html discute las cuestiones en torno a las ventanas gráficas, determinando sus dimensiones, y el elemento de cálculo de límites con respecto al sistema de coordenadas de una ventana. La parte 2 de esa publicación de blog va luego a las ventanas gráficas implícitas en los navegadores móviles. No da el código que responde su pregunta exactamente, pero definitivamente es relevante y vale la pena leerlo.