ビューにスクロールされたすべてのHTML要素を取得する

Question

HTMLでスクロール可能なテーブルが頻繁に更新され（1秒に1回程度）、1000行以上のスクロールが可能です。明らかに、更新するたびにテーブル全体を置き換えるのは妥当ではないので、現在表示されているテーブル行を置き換えたいだけです。

私の最初の試みは、すべての行の繰り返しをチェックし、オフセットをチェックすることでした。これはうまくいくが、効果が出るには遅すぎる。私は今、何をしようとしている

は通常、私はそのは<tr>を含む得ることができ、そこから<td>要素である<tbody>オーバートップ最上位の要素を、見つけるためにdocument.elementFromPoint()を使用しています。これは、テーブル自体が別の要素（例えば、浮動ライトボックス）によって隠されている場合を除いて、ほとんど機能します。

私は現在、3番目の解決策、または特定のポイントの下にあるすべての要素を取得する方法を探しています。誰かがそれらのいずれかを達成するためにどのように考えている場合は、それは非常に感謝します。

Answer 1

私はこれについて考えていて、これを思いついた。代わりに、すべての1000行は、ちょうどそれらのサブセットを監視する監視

http://jsfiddle.net/RKzRE/7/

。スクロールトップをページロードにキャッシュして効率を上げます。では、表示領域の上下にいくつかの行を更新するとどうなりますか？粒度と更新速度の間には、幸せな媒体があります。

私はスクロールダウンを実装し、更新する行数をハードコードしました。しかし、私は詳細がわかりやすいと思う。

//create an object to hold a list of row top locations 
var rowmarkers = new Object; 

//gather all rows and store their top location 
$('tr').each(function(index) { 
    //create markers for every ten rows 
    if (index % 10 == 0) { 
     $(this).addClass('marker'); 
     rowmarkers[$(this).prop('id')] = $(this).offset().top; 
    } 
}); 

//track whether user scrolls up or down 
var prevScrollTop = $(document).scrollTop(); 

//monitor scroll event 
$(document).scroll(function() { 
    var currentScrollTop = $(this).scrollTop(); 
    if (currentScrollTop > prevScrollTop) { 
     downScroll(currentScrollTop); 
    } else { 
     //up 
    } 
    prevScrollTop = currentScrollTop; 
}); 

function downScroll(scrollTop) { 
    //find the first row that is visible on screen 
    for (var row in rowmarkers) { 
     if (rowmarkers[row] > scrollTop) { 
      //all rows after this can be updated 
      var updaterow = $('#' + row).prevAll('.marker:first'); 
      if (!updaterow.length) { updaterow = $('.marker:first'); } 
      //hardcoded # of rows to update 
      for (var i = 0; i < 20; i++) { 
       console.log($(updaterow).prop('id')); 
       updaterow = updaterow.next('tr'); 
       updaterow.not('.marker').addClass('updaterow'); 
      } 
      return; 
     } 
    } 
}