HTML come dire quali elementi sono visibili?

Question

Ho visto diverse soluzioni che determinano quando un elemento è visibile nel viewport mentre si scorre la pagina, ma non ho visto nessuno che faccia ciò per gli elementi che sono contenuti in un contenitore a scorrimento div come nell'esempio qui.

Come posso rilevare gli elementi mentre scorrono in visualizzazione tramite il div di scorrimento? E al contrario, come potrei rilevarli se cadessero fuori vista. In tutti i casi gli elementi di overflow non sono nascosti all'inizio.

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

include prima la libreria 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(', ')); 
    }); 
}); 

Aggiungi in HTML per l'output risultati:

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

Si basa sul codice di coordinate dell'oggetto, strega vengono ricalcolate in evento scroll. Ci sono alcune cose da sapere. IE e, sembra, Opera prende in considerazione la larghezza e l'altezza delle barre di scorrimento stesse, che richiede l'ottimizzazione del codice tenda. Ho appena suggerito la direzione della soluzione e non ho impiegato molto tempo per eseguire il debug di questo.

Eppure, forse sarà seguito utile (da jquery api su offset):

Nota: jQuery non supporta ottenere le coordinate di offset di nascosto elementi o la contabilità per le frontiere, margini, o imbottitura sul corpo elemento .

Answer 2

http://www.quirksmode.org/mobile/viewports.html discute questioni intorno finestre, determinando le loro dimensioni, e calcolando elemento delimita rispetto coordinare telaio di una finestra. La seconda parte di quel post del blog entra quindi nelle viewport implicite nei browser mobili. Non fornisce codice che risponda esattamente alla tua domanda, ma è sicuramente pertinente e merita una lettura.