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

Get all HTML elements scrolled into view

本文关键字：视图 滚动 元素 HTML      更新时间：2023-09-26

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

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

我现在要做的是使用document.elementFromPoint()来找到<tbody>上面的最上面的元素，这通常是一个<td>元素，从那里我可以得到它包含<tr>。除了表本身被另一个元素遮蔽(例如浮动灯箱)的情况外，这几乎是可行的。

我目前正在寻找第三种解决方案，或者一种方法来获得特定点下的所有元素，而不仅仅是最上面的一个。如果有人知道如何实现这两个目标，我将不胜感激。

所以我在考虑这个，然后想到了这个

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;
        }
    }
}
相关文章：