Получить все элементы HTML, прокрученные в поле зрения

Question

У меня есть прокручиваемая таблица в HTML, которая часто обновляется (примерно один раз в секунду) и может содержать более 1000 строк. Очевидно, что заменить всю таблицу каждый раз, когда она обновляется, нецелесообразно, поэтому я хочу просто заменить строки таблицы, которые в настоящее время видны.

Моя первая попытка состояла в том, чтобы просто проверить итерацию по всем строкам и проверить их смещения; это работает, но слишком медленно, чтобы быть эффективным.

То, что я пытаюсь сделать теперь использовать document.elementFromPoint() найти верхний элемент возвышаться в <tbody>, который, как правило <td> элемент, где я могу получить его, содержащую <tr>. Это почти работает, за исключением случая, когда сама таблица закрывается другим элементом (например, плавающим лайтбокс).

В настоящее время я ищу либо третье решение, либо способ получить все элементы под определенной точкой, а не только самую верхнюю. Если кто-нибудь знает, как выполнить любой из этих, это было бы высоко оценено.

Answer 1

Так что я думал об этом и придумал это.

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

Вместо мониторинга все 1000 строк просто контролировать их подмножество. Кэш их scrolltops на загрузке страницы для повышения эффективности. Итак, что, если вы обновите несколько строк выше или ниже области отображения? Вы можете найти счастливую среду между детализацией и скоростью обновлений.

Я только реализовал прокрутку вниз и жестко закодировал количество строк для обновления. Но я думаю, что детали будут легко понять.

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