Question

我在HTML中有一个可滚动的表，它经常更新（大约每秒一次）并且可以包含超过1000行。显然，每次更新时替换整个表是不合理的，所以我只想替换当前可见的表行。

我的第一次尝试是检查所有行的迭代并检查它们的偏移量;这有效，但效果太慢了。

我现在要做的是使用document.elementFromPoint()找到<tbody>上方最顶层的元素，这通常是<td>元素，我可以从中获取<tr>元素{{1}} 1}}。这几乎可以工作，除了表本身被另一个元素（例如浮动灯箱）遮挡的情况。

我目前正在寻找第三种解决方案，或者在特定点下获取所有元素的方法，而不仅仅是最顶层的方法。如果有人知道如何完成其中任何一个，那将非常感激。

Answer 1

所以我正在考虑这个问题并想出了这个。

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

将所有HTML元素滚动到视图中

1 个答案: