보기로 스크롤 된 모든 HTML 요소 가져 오기

Question

자주 업데이트 (초당 1 회)되는 HTML의 스크롤 가능한 표가 있으며 최대 1000 개의 행을 포함 할 수 있습니다. 분명히, 업데이트 할 때마다 전체 테이블을 교체하는 것이 바람직하지 않기 때문에 현재 보이는 테이블 행을 교체하고 싶습니다.

첫 번째 시도는 모든 행에 대해 반복을 확인하고 오프셋을 확인하는 것이 었습니다. 이 방법이 효과적이기는하지만 너무 느립니다. 내가 지금 할 노력하고있어 무엇

보통 나는 그것이 <tr>를 포함 얻을 수있는 곳에서 <td> 요소 인 <tbody> 솟다 최상위 요소를 찾기 위해 document.elementFromPoint()를 사용합니다. 테이블 자체가 다른 요소 (예 : 떠 다니는 라이트 박스)에 의해 가려진 경우를 제외하면 거의 작동합니다.

현재 세 번째 해결 방법이나 특정 요소 아래의 모든 요소를 ​​가져 오는 방법 중 하나를 찾고 있습니다. 누구든지 그 중 하나를 달성하는 방법을 알고 있다면, 그것은 많이 감사 할 것입니다.

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