30

我正在使用以下代码，当滚动条到达底部时它正在工作，

if($(window).scrollTop() == $(document).height() - $(window).height()){

但是，我希望当我达到滚动的 70% 而不是 100 时触发 ajax。

4

2 回答 2

92

如果您当前的检查在滚动到页面底部时触发，您可以尝试一些基本的算术：

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
                                          //where 0.7 corresponds to 70% --^

确保添加一个检查以不触发多个同时发生的 Ajax 请求，如果您还没有这样做的话。

这超出了问题的范围，但是如果您想要一个如何防止同时触发多个请求的示例：

声明一个全局变量，例如processing.

然后将其合并到您的函数中：

if (processing)
    return false;

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
    processing = true; //sets a processing AJAX request flag
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc.
        //load the content to your div
        processing = false; //resets the ajax flag once the callback concludes
    });
}

这是一个使用 var 跟踪滚动功能是否存在活动 Ajax 请求的简单示例，并且它不会干扰您可能拥有的任何其他并发 Ajax 请求。

编辑：JSFiddle 示例

请注意，使用 % 来测量文档高度可能不是一个好主意，考虑到每次加载某些内容时文档的高度都会增加，从而触发 Ajax 请求相对远离页面底部（绝对大小明智的）。

我建议使用固定值偏移量来防止这种情况（200-700 左右）：

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){
                                 // pixels offset from screen bottom   --^

示例：JSFiddle

编辑：要使用百分比重现第一个代码中的问题，请将 50div秒加载到其中。当你加载下一个div时，它只会增加文档总高度的 2%，这意味着一旦你将这 2% 滚动回文档高度的 70%，就会触发下一个请求。在我的固定示例中，定义的底部偏移仅在用户位于屏幕底部定义的绝对像素范围内时才会加载新内容。

于 2012-05-19T05:27:24.300 回答
15

快速谷歌搜索get percentage scrolled down将这个页面作为第一个结果（使用下面的代码，或多或少地满足您的需求）。我觉得你在这里问之前没有尝试任何研究。

$(document).scroll(function(e){

    // grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;

    if(scrollPercent > 50) {
        // run a function called doSomething
       doSomething();
    }

    function doSomething() { 

        // do something when a user gets 50% of the way down my page

    }

});
于 2012-05-19T05:26:53.893 回答