Question

我正在尝试构建一个函数，当您滚动到页面底部时，它会运行一个函数来加载页面上的更多项目。

我开始时加入一个没有内容的div

<div id="loadMore"></div>

然后我在这里找到另一个查看滚动的函数

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    console.log(docViewTop, docViewBottom, elemTop, elemBottom);
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function() {   

    if(isScrolledIntoView($('#loadMore')))
    {
        alert("reached");
        return false;

    }    
});

一个问题是它似乎很快就达到警报而另一个主要问题是它多次警告“到达”屏幕 - 这显然很糟糕，因为我只希望该功能运行一次......

然后它将加载其他内容，如果再次到达页面底部，那么函数（例如警报）将再次运行

我是以最好的方式来做这件事的吗？任何人都可以帮忙吗？

感谢

Answer 1

使用滚动功能时，需要小心，因为滚动每个像素会触发一次事件。因此，您需要使用超时仅在滚动停止时调用该函数。试试这个：

var timer;
$(window).scroll(function () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        if (isScrolledIntoView($('#loadMore'))) {
            alert("reached");
            return false;
        }
    }, 50);
});

Example fiddle

Answer 2

你应该只绑定你的函数一次。在向页面添加新项目后，您可以检查是否有更多项目可用并重新重新绑定此功能。

var addNewContent = function () {
    // get new data
    // append new data
    $('#content').prepend($('<div style="height: 1000px;">some content</div>'));

    // rebind the event, if still more data is available
    $('#content').one( 'endofcontent', addNewContent);
};

$('#content').one("endofcontent", addNewContent);

$(window,document).scroll(function() {

    if(isScrolledIntoView($('#loadMore'))) {
        $('#content').trigger("endofcontent");
        return false;
    }
});

测试它：http://fiddle.jshell.net/d5CSd/

滚动到页面底部运行功能 - 函数运行太多次。

2 个答案: