Javascript 当滚动达到 80% 时加载 ajax
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10662528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load ajax when scroll reaches 80%
提问by Yahoo
I am using the following code which is working when the scroll bar reaches the botttom,
我正在使用以下代码，当滚动条到达底部时，该代码正在工作，
if($(window).scrollTop() == $(document).height() - $(window).height()){
I however want that the ajax is fired when i reached 70% of the scroll not 100.
但是，我希望当我达到滚动的 70% 而不是 100 时触发 ajax。
回答by Fabrício Matté
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% --^
Make sure to add a check to don't fire multiple simultaneous Ajax requests, if you didn't already.
如果您还没有，请确保添加一个检查以防止同时触发多个 Ajax 请求。
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.
声明一个全局变量，例如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
});
}
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.
这是使用 var 来跟踪是否有针对您的滚动功能的活动 Ajax 请求的简单示例，并且它不会干扰您可能拥有的任何其他并发 Ajax 请求。
Edit: JSFiddle example
编辑：JSFiddle 示例
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).
请注意，使用 % 来测量文档高度可能是一个坏主意，考虑到每次加载某些内容时文档的高度都会增加，从而触发 Ajax 请求离页面底部相对更远（绝对大小）明智的）。
I'd recommend using a fixed value offset to prevent that (200-700 or so):
我建议使用固定值偏移量来防止这种情况（200-700 左右）：
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){
// pixels offset from screen bottom --^
Example: JSFiddle
示例：JSFiddle
Edit: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.
编辑：要以百分比重现第一个代码中的问题，请将 50div秒加载到其中。当您加载下一个时div，它只会将文档总高度增加 2%，这意味着只要您将这 2% 滚动回文档高度的 70%，就会触发下一个请求。在我的固定示例中，仅当用户位于距屏幕底部定义的绝对像素范围内时，定义的底部偏移量才会加载新内容。
回答by Daedalus
A quick google search for get percentage scrolled downbrings up this pageas the first result(with the code below, which more or less does what you want). I feel like you didn't attempt any research before asking here.
快速谷歌搜索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
}
});
