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

Question

我有简单的数据网格,如下所示:

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

*请注意,我在uiGridContent div上方和下方的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;

    }

});

这个想法是,当用户向下滚动表格时,当它们到达gridcontent div中最后一个tbody的底部时,它将加载到下一页.哪个工作正常!

问题在于滚动备份.计划是这样做的,当用户向上滚动回到最后一个tbody时,它会再次删除它,直到它们最终只有一个剩余的tbody(在这种情况下是原始的).实际发生的事情是,一旦他们开始向上滚动它就会删除除第一个之外的所有内容,或者有时会错过向上滚动并将用户带到顶部而不删除所有其他tbodys.

有任何想法吗？我认为问题在于if语句:

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

在向上滚动部分下.

Answer 1

是的，你是对的，问题是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在使用 a 时缓存 a （内容底部与可视区域底部之间的距离）的概念，这可能有助于提高可读性：

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