根据滚动方向和高度加载和删除内容页面

Load and remove pages of content based on scroll direction and height

本文关键字：删除 高度 滚动 方向 加载      更新时间：2023-09-26

我有这样的简单数据网格：

<div class="uiGridContent">
    <table>
        <tbody id="page-1">
             <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
             </tr>
        </tbody>
    </table>
</div>

* 请注意，我在 uiGridContentdiv 上方和下方的div 中的单独表中有一个页眉和页脚。此示例不需要这些。

var nextPage = 1, lastScrollTop = 0, st;
$('.uiGridContent').scroll(function(){
    var st = $(this).scrollTop();
    // We're scrolling down
    if (st > lastScrollTop){
        if( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent')[0].scrollHeight && nextPage < 10) {
            $.ajax({
                url: '<?php echo $appurl; ?>?page=' + nextPage,
                success: function(data) {
                    nextPage = nextPage + 1;
                    var content = $(data).find('.uiGrid tbody').html();
                    $('.uiGridContent tbody').last().after('<tbody id="page-'+nextPage+'">'+content+'</tbody>');
                },
                error: function(data) {
                    alert(data);
                }
            });
        }
        lastScrollTop = st;

    // We're scrolling up
    } else {
        if( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height() ) {
            var pageToRemove = $('.uiGridContent tbody').last();
            if( pageToRemove.attr('id') != 'page-1') {
                pageToRemove.remove(); nextPage = nextPage - 1;
            } else {
                $('.uiGridContent').scrollTo(0,0);
            }
        }
        lastScrollTop = st;
    }
});

这个想法是，当用户向下滚动表格时，当他们到达网格内容div中最后一个正文的底部时，它将在下一页加载。

问题在于向上滚动备份。计划是使用户向上滚动到最后一个正文时，它会再次删除它，直到他们最终只剩下一个正文（在本例中为原始主体）。实际发生的是，一旦他们开始向上滚动，它就会删除除第一个之外的所有内容，或者有时会错过向上滚动并将用户带到顶部而不删除所有其他 tbody。

有什么想法吗？我认为问题出在 if 语句上：

if( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height() ) {

在向上滚动部分下。

是的，你是对的，问题是 if 语句中使用的条件：

if ( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height() )

这是在询问 .uiGridContent 的 scrollTop 加上它的.innerHeight()是否大于最后一个tbody元素的高度。这类似于询问可滚动窗格的底部是否低于最后一个tbody元素的高度（如果它位于.uiGridContent的顶部）。那不是你想要的。

您想要的是询问可滚动窗格的底部是否在最后一个tbody元素的顶部之上。由于您只关心最后一个，因此您可以使用：

if ( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() <= ($this[0].scrollHeight - $('.uiGridContent tbody').last().height()) )

尽管您确实想像我在此演示中所做的那样缓存这些重复的$( ... )调用：

http://jsfiddle.net/anmkU/3/

而且您可能希望在使用它时缓存scrollBottom（内容底部和可视区域底部之间的距离）的想法，这可能有助于提高可读性：

http://jsfiddle.net/anmkU/5/

相关文章：