獲取滾動到視圖中的所有HTML元素

我在HTML中有一個可更新的頻繁表（每秒大約一次），可以包含1000行以上的內容。顯然，每次更新時都替換整個表是不合理的，所以我想只替換當前可見的表格行。獲取滾動到視圖中的所有HTML元素

我的第一次嘗試是檢查遍歷所有行並檢查它們的偏移量;這有效，但它太慢而不能有效。

我試圖現在要做的就是用document.elementFromPoint()找到上層建築的<tbody>最頂端的元素，通常是從哪裏可以得到它含有<tr>一個<td>元素。除了表格本身被另一個元素遮擋的情況（例如浮動的燈箱），這幾乎可以工作。

我目前正在尋找第三種解決方案，或者在特定點下獲取所有元素的方法，而不僅僅是最上面的一個。如果任何人有任何想法如何實現這些，那將非常感激。

來源

2011-12-28 sslepian

爲什麼不分頁行？ – 2011-12-28 21:59:00

我想到了這一點，但用戶不得不交換頁面而不是僅僅滾動 - 這與無限滾動技術流行的原因相同。 – sslepian 2011-12-28 22:00:53

我不知道你是否在使用/願意使用jQuery，但如果我沒有誤解，[這個插件]（http://www.appelsiini.net/projects/viewport）似乎符合你的需求。 – pimvdb 2011-12-28 22:02:32

所以我在想這個，想出了這個。

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

不能監視所有1000行只是監視它們的子集。在頁面加載時緩存他們的滾動頁面以提高效率。那麼如果更新顯示區域上方或下方的幾行呢？您可以在粒度和更新速度之間找到快樂的媒介。

我只實現了向下滾動和硬編碼要更新的行數。但我認爲細節很容易弄清楚。

//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; 
     } 
    } 
}

來源

2011-12-29 05:41:56 mrtsherman

獲取滾動到視圖中的所有HTML元素

回答

相關問題