jQuery：检测到达滚动底部不起作用，只检测顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2837741/
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
jQuery: detecting reaching bottom of scroll doesn't work, only detects the top
提问by Hyman
So basically my problem is a seemingly simple one.
所以基本上我的问题是一个看似简单的问题。
You can see it in action at http://furnace.howcode.com(please note that data is returned via Ajax, so if nothing happens give it a few moments!).
您可以在http://furnace.howcode.com 上看到它的实际效果（请注意，数据是通过 Ajax 返回的，所以如果没有任何反应，请稍等片刻！）。
What's MEANT to happen, is in the second column when you reach the bottom of scrolling, the next 5 results are returned.
发生的意思是，当您到达滚动底部时，在第二列中，返回接下来的 5 个结果。
But what actually happens is it only returns the 5 results when you hit the TOP of the scroll area. Try it: scroll down, nothing happens. Scroll back up to the top, the results are returned.
但实际发生的是，当您点击滚动区域的顶部时，它只返回 5 个结果。试试看：向下滚动，没有任何反应。向上滚动到顶部，返回结果。
What's going wrong?
怎么了？
Here's my code I'm using:
这是我正在使用的代码：
$('#col2').scroll(function(){
if ($('#col2').scrollTop() == $('#col2').height() - $('#col2').height()){
loadMore();
}
});
loadMore();is the function that gets the data and appends it.
loadMore();是获取数据并附加它的函数。
So what's going wrong here? Thanks for your help!
那么这里出了什么问题呢？谢谢你的帮助！
回答by Panagiotis Panagi
The following has been tested, and works fine:
以下已经过测试，工作正常：
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadMore();
}
});
回答by munch
This has worked for me in the past.
这在过去对我有用。
var col = $('#col2');
col.scroll(function(){
if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
loadMore();
});
Here's a good explanationtoo.
这里也有很好的解释。
回答by jordanstephens
Your math is wrong, your saying if the scrollbar position is equal to the height of the column minus the height of the column (which equals zero) load more. that's why your loadMore()is called at the top of your col.
你的数学是错误的，你说如果滚动条位置等于列的高度减去列的高度（等于零）加载更多。这就是为什么您loadMore()在 col 的顶部被调用。
Try:
尝试：
$('#col2').scroll(function(){
if ($('#col2').scrollTop() == $('#col2').height()){
loadMore();
}
});
回答by Chandler Zwolle
I found an alternative that works.
我找到了一个可行的替代方案。
None of these answers worked for me (currently testing in FireFox 22.0), and after a lot of research I found, what seems to be, a much cleaner and straight forward solution.
这些答案都不适合我（目前在 FireFox 22.0 中测试），经过大量研究后我发现，似乎是一个更清晰、更直接的解决方案。
Implemented solution:
实施的解决方案：
function IsScrollbarAtBottom() {
var documentHeight = $(document).height();
var scrollDifference = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollDifference);
}
资源：http: //jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html
Regards
问候
回答by Ido Schacham
Maybe the following will work:
也许以下方法会起作用：
- HTML - wrap whatever is inside #col2 with another DIV, say #col2-inner
- CSS - set a fixed height and 'overflow: auto' only for #col2
JS - see plugin below:
$.fn.scrollPaging = function (handler) { return this.each(function () { var $this = $(this), $inner = $this.children().first(); $this.scroll(function (event) { var scrollBottom = $this.scrollTop() + $this.height(), totalScroll = $inner.height(); if (scrollBottom >= totalScroll) { handler(); } }); }); }; $('#col2').scrollPaging(loadMore);
- HTML - 用另一个 DIV 包裹 #col2 中的任何内容，比如 #col2-inner
- CSS - 仅为 #col2 设置固定高度和“溢出：自动”
JS - 请参阅下面的插件：
$.fn.scrollPaging = function (handler) { return this.each(function () { var $this = $(this), $inner = $this.children().first(); $this.scroll(function (event) { var scrollBottom = $this.scrollTop() + $this.height(), totalScroll = $inner.height(); if (scrollBottom >= totalScroll) { handler(); } }); }); }; $('#col2').scrollPaging(loadMore);
回答by Derek P
@munch was closest, but if you have a border on the element, then you need to use .innerHeight() instead of .outerHeight() since the latter includes the border and .scrollTop() does not (.height() is also out if you have padding). Also, at least as of jQuery 1.7.1 and maybe earlier, I'd recommend using .prop('scrollHeight') instead of retrieving it directly from the DOM. I found some talkthat the DOM scrollHeight is broken on IE 5-8 and the jQuery function abstracts that for me, at least on IE8.
@munch 最接近，但是如果元素上有边框，则需要使用 .innerHeight() 而不是 .outerHeight() 因为后者包含边框而 .scrollTop() 不包含（.height() 也是如果您有填充，则退出）。另外，至少从 jQuery 1.7.1 开始，也许更早，我建议使用 .prop('scrollHeight') 而不是直接从 DOM 检索它。我发现有人说DOM scrollHeight 在 IE 5-8 上被破坏了，jQuery 函数为我抽象了它，至少在 IE8 上。
var $col = $('#col2');
$col.scroll(function(){
if ($col.innerHeight() == $col.prop('scrollHeight') - $col.scrollTop())
loadMore();
});
回答by Mark
The solution that jordanstephens posted is on the right track. However, what you need is not the height of #col2, you need the height of the parent element of #col2.
jordanstephens 发布的解决方案走在正确的轨道上。但是，你需要的不是#col2的高度，而是#col2的父元素的高度。
Example:
例子：
$('#col2').scroll(function(){
if ($('#col2').scrollTop() == $('#col2').parent().height()) {
loadMore();
}
}
回答by Abu Sufian
I know this question is already solved, but a concern when using jQuery scrollTOp()function on element other than on $(window).scrollTop()or $(document).scrollTop()since some issue like
我知道这个问题已经解决了，但是scrollTOp()在元素上使用 jQuery函数而不是 on$(window).scrollTop()或$(document).scrollTop()因为一些问题时的一个问题
jQuery: detecting reaching bottom of scroll doesn't work, only detects the top
Explain why scrollTop() always returns 0 here
$(document).scrollTop() always returns 0
$(document).scrollTop() 总是返回 0
So you can use
所以你可以使用
$(window).scrollTop() - $('your_selector').offset().top
instead of
代替
$('your_selector').scrollTOp()
to avoid the jQuery scrollTOp()issue.
避免jQueryscrollTOp()问题。
My suggestion is as follows:
我的建议如下：
$(window).scroll(function() {
var $more = $('#col2');
var top = $(window).scrollTop() - $more.offset().top;
if(top + $more.innerHeight() >= $more[0].scrollHeight) {
loadMore();
}
});
