当滚动达到 80% 时加载 ajax [英] Load ajax when scroll reaches 80%

问题描述

我正在使用以下代码，该代码在滚动条到达底部时起作用，

I am using the following code which is working when the scroll bar reaches the botttom,

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

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

I however want that the ajax is fired when i reached 70% of the scroll not 100.

推荐答案

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

Provided your current check is firing when scrolled to the page's bottom, you can try some basic arithmetics:

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

如果您还没有这样做，请确保添加一个检查以防止同时触发多个 Ajax 请求.

Make sure to add a check to don't fire multiple simultaneous Ajax requests, if you didn't already.

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

This is rather out of the scope of the question, but if you want an example of how to prevent multiple requests from being fired simultaneously:

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

Declare a global var, e.g. processing.

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

Then incorporate it in your function:

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 请求.

That's a simple example of using a var to keep track if there is an active Ajax request for your scroll function or not, and it doesn't interfere with any other concurring Ajax request which you may have.

JSFiddle示例

请注意，使用 % 来衡量文档高度可能不是一个好主意，因为每次加载内容时文档的高度都会增加，从而触发 Ajax 请求离页面底部相对更远(绝对大小明智).

Please note that using a % to measure the document height might be a bad idea, considering that the document's height will increase each time you load something, making it trigger the Ajax request being relatively more far from the bottom of the page (absolute-size wise).

我建议使用固定值偏移来防止这种情况(200-700 左右):

I'd recommend using a fixed value offset to prevent that (200-700 or so):

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

示例:JSFiddle

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

To reproduce the issue in the first code with percentages, load 50 divs into it. When you load the next div, it'll add only 2% to the total document's height, meaning the next request will be triggered as soon as you scroll these 2% back to the 70% of the document's height. In my fixed example, the defined bottom offset will load new content only when the user is at a defined absolute pixels range from the bottom of the screen.

这篇关于当滚动达到 80% 时加载 ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！