本文翻译自：Check if a user has scrolled to the bottom
I'm making a pagination system (sort of like Facebook) where the content loads when the user scrolls to the bottom. 我正在创建一个分页系统（有点像Facebook），当用户滚动到底部时，内容会加载。 I imagine the best way to do that is to find when the user is at the bottom of the page and run an ajax query to load more posts. 我想最好的方法是找到用户位于页面底部并运行ajax查询以加载更多帖子。
The only problem is I don't know how to check if the user has scrolled to the bottom of the page with jQuery. 唯一的问题是我不知道如何检查用户是否已使用jQuery滚动到页面底部。 Any ideas? 有任何想法吗？
I need to find a way to check when the user has scrolled to the bottom of the page with jQuery. 我需要找到一种方法来检查用户何时使用jQuery滚动到页面底部。
#1楼
参考：https://stackoom.com/question/GM54/检查用户是否已滚动到底部
#2楼
Nick Craver's answer works fine, spare the issue that the value of $(document).height() varies by browser. 尼克克拉弗的答案很好， $(document).height()因浏览器而异。
To make it work on all browsers, use this function from James Padolsey : 要使其适用于所有浏览器，请使用James Padolsey的此功能：
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
in place of $(document).height() , so that the final code is: 代替$(document).height() ，以便最终的代码是：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!");
}
});
#3楼
For those using Nick's solution and getting repeated alerts / events firing, you could add a line of code above the alert example: 对于那些使用Nick的解决方案并获得重复警报/事件触发的人，您可以在警报示例上方添加一行代码：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
alert("near bottom!");
}
});
This means that the code will only fire the first time you're within 100px of the bottom of the document. 这意味着代码只会在您第一次在文档底部的100px范围内时触发。 It won't repeat if you scroll back up and then back down, which may or may not be useful depending on what you're using Nick's code for. 如果您向上滚动然后向下滚动，它将不会重复，根据您使用的尼克代码，这可能有用也可能没有用。
#4楼
Further to the excellent accepted answer from Nick Craver, you can throttle the scroll event so that it is not fired so frequently thus increasing browser performance : 除了Nick Craver的优秀接受答案之外，您可以限制滚动事件，以便不会频繁触发，从而提高浏览器性能 ：
var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);
$document.ready(function () {
$window
.off('scroll', ScrollHandler)
.on('scroll', ScrollHandler);
});
function ScrollHandler(e) {
//throttle event:
clearTimeout(_throttleTimer);
_throttleTimer = setTimeout(function () {
console.log('scroll');
//do work
if ($window.scrollTop() + $window.height() > $document.height() - 100) {
alert("near bottom!");
}
}, _throttleDelay);
}
#5楼
Nick Craver's answer needs to be slightly modified to work on iOS 6 Safari Mobile and should be: Nick Craver的答案需要稍加修改才能在iOS 6 Safari Mobile上运行，应该是：
$(window).scroll(function() {
if($(window).scrollTop() + window.innerHeight == $(document).height()) {
alert("bottom!");
}
});
Changing $(window).height() to window.innerHeight should be done because when the address bar is hidden an additional 60px are added to the window's height but using $(window).height() does not reflect this change, while using window.innerHeight does. 更改$（窗口）.height（）来window.innerHeight应该因为做了当地址栏被隐藏额外的60像素被添加到窗口的高度，但使用$(window).height() 没有反映这种变化，同时使用window.innerHeight 。
Note : The window.innerHeight property also includes the horizontal scrollbar's height (if it is rendered), unlike $(window).height() which will not include the horizontal scrollbar's height. 注意 ： window.innerHeight属性还包括水平滚动条的高度（如果它被渲染），不像$(window).height() ，它不包括水平滚动条的高度。 This is not a problem in Mobile Safari, but could cause unexpected behavior in other browsers or future versions of Mobile Safari. 这在Mobile Safari中不是问题，但可能会在其他浏览器或未来版本的Mobile Safari中导致意外行为。 Changing == to >= could fix this for most common use cases. 将==更改为>=可以解决大多数常见用例的问题。
Read more about the window.innerHeight property here 在这里阅读更多关于window.innerHeight属性的信息
#6楼
Here is a piece of code that will help you debug your code, I tested the above answers and found them to be buggy. 这是一段代码，可以帮助您调试代码，我测试了上面的答案，发现它们是错误的。 I have test the followings on Chrome, IE, Firefox, IPad(Safari). 我在Chrome，IE，Firefox，iPad（Safari）上测试了以下内容。 I don't have any others installed to test... 我没有安装任何其他测试...
<script type="text/javascript">
$(function() {
$(window).scroll(function () {
var docElement = $(document)[0].documentElement;
var winElement = $(window)[0];
if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
alert('bottom');
}
});
});
</script>
There may be a simpler solution, but I stopped at the point at which IT WORKED 可能有一个更简单的解决方案，但我停止了IT工作的时间点
If you are still having problems with some rogue browser, here is some code to help you debug: 如果你仍然遇到一些流氓浏览器的问题，这里有一些代码可以帮你调试：
<script type="text/javascript">
$(function() {
$(window).scroll(function () {
var docElement = $(document)[0].documentElement;
var details = "";
details += '<b>Document</b><br />';
details += 'clientHeight:' + docElement.clientHeight + '<br />';
details += 'clientTop:' + docElement.clientTop + '<br />';
details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
details += 'scrollTop:' + docElement.scrollTop + '<br />';
var winElement = $(window)[0];
details += '<b>Window</b><br />';
details += 'innerHeight:' + winElement.innerHeight + '<br />';
details += 'outerHeight:' + winElement.outerHeight + '<br />';
details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
details += 'screenTop:' + winElement.screenTop + '<br />';
details += 'screenY:' + winElement.screenY + '<br />';
details += 'scrollY:' + winElement.scrollY + '<br />';
details += '<b>End of page</b><br />';
details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
details += 'End of Page? ';
if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
details += 'YES';
} else {
details += 'NO';
}
$('#test').html(details);
});
});
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">
I hope this will save someone some time. 我希望这能节省一些时间。
