jQuery:检测滚动底部不起作用,只检测顶部
所以基本上我的问题是一个看似简单的问题。jQuery:检测滚动底部不起作用,只检测顶部
你可以在http://furnace.howcode.com看到它的行动(请注意,数据是通过Ajax返回的,所以如果没有任何反应,给它一点时间!)。
想要发生什么,在第二列中,当您到达滚动底部时,会返回下5个结果。
但实际发生的是它只返回5个结果,当你点击滚动区域的顶部。尝试一下:向下滚动,没有任何反应。向上滚动到顶部,返回结果。
怎么回事?
这里是我的代码,我使用的是:
$('#col2').scroll(function(){
if ($('#col2').scrollTop() == $('#col2').height() - $('#col2').height()){
loadMore();
}
});
loadMore();
是获取数据并追加其功能。
那么这里怎么回事?谢谢你的帮助!
你的数学是错误的,你说如果滚动条的位置等于列的高度减去列的高度(它等于零)加载更多。这就是为什么你的loadMore()
被称为你的上面。
尝试:
$('#col2').scroll(function(){
if ($('#col2').scrollTop() == $('#col2').height()){
loadMore();
}
});
恐怕这不起作用。我手动输入后复制粘贴,但没有任何反应。原始URL我得到的原始来源是这样的:http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/ – Jack 2010-05-14 21:40:52
这在过去为我工作。
var col = $('#col2');
col.scroll(function(){
if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
loadMore();
});
这里还有一个很好的explanation。
jordanstephens发布的解决方案在正确的轨道上。但是,您需要的不是#col2的高度,您需要#col2的父元素的高度。
例子:
$('#col2').scroll(function(){
if ($('#col2').scrollTop() == $('#col2').parent().height()) {
loadMore();
}
}
下进行了测试,并能正常工作:
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadMore();
}
});
将函数包装在[反弹](http://lodash.com/docs#debounce)功能,以提高性能。 – 2012-10-16 02:45:25
+1工程就像一个魅力! – dariush 2014-04-28 21:21:24
也许下面的工作:
- HTML - 包装无论是内部#COL2与另一个DIV,说#col2 - 内部
- CSS - 设置一个固定heig HT和:仅#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);
@munch最接近的,但如果你有元件上的边界,那么你需要使用.innerHeight()而不是.outerHeight(),因为后者包含边框并且.scrollTop()不会(如果有填充,则.height()也会出现)。另外,至少在jQuery 1.7.1以及更早的版本中,我建议使用.prop('scrollHeight'),而不是直接从DOM中检索它。我发现some talk在IE 5-8上DOM scrollHeight被破坏,jQuery函数为我抽象,至少在IE8上。
var $col = $('#col2');
$col.scroll(function(){
if ($col.innerHeight() == $col.prop('scrollHeight') - $col.scrollTop())
loadMore();
});
您的回答对我来说非常合适,非常感谢:) – Systemfreak 2013-09-27 22:46:43
我发现了一个可行的方法。
这些答案都不适用于我(目前在FireFox 22.0中测试),经过大量研究后,我发现,似乎是一个更清洁和直接的解决方案。
实施的解决方案:
function IsScrollbarAtBottom() {
var documentHeight = $(document).height();
var scrollDifference = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollDifference);
}
问候
我知道这个问题已经解决了,但是元素使用问题时的jQuery scrollTOp()
功能除了上$(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
所以,你可以使用的
$(window).scrollTop() - $('your_selector').offset().top
代替
$('your_selector').scrollTOp()
避免了jQuery scrollTOp()
问题。
我的建议如下:
$(window).scroll(function() {
var $more = $('#col2');
var top = $(window).scrollTop() - $more.offset().top;
if(top + $more.innerHeight() >= $more[0].scrollHeight) {
loadMore();
}
});
恐怕没有什么工作。有人有任何进一步的想法? – Jack 2010-05-14 22:30:36