当滚动达到80％负载阿贾克斯 [英] Load ajax when scroll reaches 80%

问题描述

我使用下面的code时滚动条到达botttom这是工作，

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。

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.

这是相当出了问题的范围，但如果你想如何至由对$ pvent多个请求的例子同时被解雇了：

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

我建议你使用一个固定的值的偏移量为prevent是（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

编辑：：要重现该问题在第一code与百分比，负载50 DIV s转换它。当您加载下一个 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％负载阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！