HTML jak określić, które elementy są widoczne?

Question

Widziałem kilka rozwiązań, które określają, kiedy element jest widoczny w oknie roboczym podczas przewijania strony, ale nie widziałem żadnego, który to zrobić dla elementów, które są zawarte w przewijanym pojemniku div, jak w tym przykładzie.

Jak wykryłabym przedmioty, które przewijają się do widoku za pomocą przewijanego div? I w przeciwieństwie do tego, jak je wykryję, jeśli znikną z pola widzenia. We wszystkich przypadkach elementy przelewowe nie są ukryte na samym początku.

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

obejmują bibliotekę jQuery na pierwszej stronie.

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

Dodaj HTML dla wyników produkcji:

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

To jest kod na podstawie coords obiektu, czarownice są przeliczane na przewijania zdarzenia. Jest kilka rzeczy do poznania. IE i wydaje się, że Opera bierze pod uwagę szerokość i wysokość pasków przewijania, które wymagają strojenia kodu kurtyny. Właśnie zasugerowałem kierunek rozwiązania i nie spędziłem zbyt wiele czasu na debugowanie tego.

A jednak, być może będą przydatne następujące (od jquery api o przesunięcie):

Uwaga: jQuery nie obsługuje coraz offsetowych współrzędne ukrytych elementów lub stanowiących granice, marże, lub zestaw wyściółki na ciele element.

Answer 2

http://www.quirksmode.org/mobile/viewports.html omawia zagadnienia wokół rzutniach, określające ich wymiary i obliczania elementu ograniczającą względem rzutni układzie współrzędnych ramy. Część 2 tego posta na blogu przechodzi następnie do niejawnych widoków w przeglądarkach mobilnych. Nie podaje kodu, który dokładnie odpowiada na twoje pytanie, ale na pewno jest trafny i wart przeczytania.