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> 

これは、コードオブジェクトのCOORDSに基づいており、魔女はスクロールイベントで再計算されます。知るべきことがいくつかあります。 Operaは、スクロールバー自体の幅と高さを考慮し、カーテンコードのチューニングを要求しています。私はちょうど解決策の方向を示唆し、これをデバッグするのに多くの時間を費やさなかった。

そして、まだ、多分便利以下になります（約jQueryのAPIからのオフセット）：

注：jQueryの隠された 要素の オフセット座標を取得または国境を占めサポートしていない、 余白、または本体に埋め込まれたパディング。 要素。

Answer 2

http://www.quirksmode.org/mobile/viewports.htmlは、それらの寸法を決定する、ビューポートの周りの問題について説明し、ビューポートの座標フレームに対して要素の境界を計算します。そのブログポストの第2部は、モバイルブラウザの暗黙のビューポートに入ります。彼はあなたの質問に正確に答えるコードを教えてくれませんが、それは確かに関連性があり、読む価値があります。