根据滚动位置在表格中加载内容

Question

我正在使用jQuery，并且我已经有一个设置了特定高度的表格，其中overflow:scroll。我想知道我应该访问什么，以便知道何时从服务器加载更多数据（我不需要ajax调用帮助或加载实际数据）。相反，我试图了解如何知道我的滚动位置或知道我什么时候接近数据底部（所以我可以提前加载）。

那么，我如何知道何时根据滚动位置加载更多数据？

Answer 1

这里是一个解决方案，使用非标准（但广泛支持的）scrollHeight属性：

$("table").on("scroll", function(event) { 
    var $elem = $(event.target); 
    if(event.target.scrollHeight - $elem.scrollTop() === $elem.outerHeight()) { 
    // Scrolled to bottom, load more data 
    } 
}); 

您可能希望在用户到达底部之前加载更多的数据，如果是的话，你应该使用一些门槛：

$("table").on("scroll", function(event) { 
    var $elem = $(event.target) 
    , threshold = 100; 
    if(event.target.scrollHeight - $elem.scrollTop() + threshold >= $elem.outerHeight()) { 
    // Scrolled to bottom, load more data 
    } 
}); 

如果你不想使用scrollHeight，你必须有一个内部元件，其中可用于计算高度。也许用div包装table，然后在div上设置overflow: scroll。详细信息请参见how to tell if you're scroll to bottom。