2010-07-11 70 views
2

我如何找到元素底部的像素值。例如。 #posts股利。我想创建一个无限的滚动条。这是我可以检测到用户是否已经到达/位于#posts的底部,如果是,我想加载新帖子。如何找到元素底部的像素值(div)

更新:

我猜1个选择是使用

$("#header").height() + $("#posts").height() 

,但我想使代码通用。所以也许我可以将这个功能转换成插件。上面的代码将不会考虑,填充,边距,上述#posts

+0

这是一个坏主意,有没有办法产生一个正常运转的无限滚动所有平台上的工作或不闪烁像疯了似的在平板电脑等 – Metalshark 2010-07-11 10:56:08

+0

嗯,为什么它闪光在平板电脑上?嗯,我想一个无限的滚动将提高可用性,并将阻止用户不得不点击导航。一些他们可能不会做或发现它很麻烦的东西 – 2010-07-11 11:02:40

+0

你有竞争条件,所以例如当你已经到达底部(同时按住滚动条)它的加载新内容来显示...取决于操作系统是否有调整滚动条或平板电脑驱动程序已发出新的事件(如轻微移动),它将起作用,否则它会将您放到页面上不可预知的地方。作为WACOM用户(在Mac和Windows XP/7上),jQuery的评论部分让我发疯。即使Nick Craver的例子不起作用 - mouseup事件从不会触发,并且滚动条突然跟随着鼠标。 – Metalshark 2010-07-11 11:08:04

回答

6
var div = $('#posts'); 
var bottom = div.offset().top + div.height(); 
3

任何元素如果你有一个<div>#posts内与实际内容,你会做这样的事情:

$("#posts").scroll(function() { 
    if($(this).scrollTop() == ($("#posts_content").outerHeight() - $(this).height())) { 
    alert("Reached Bottom!"); 
    } 
});​ 

You can try a demo here。在.scroll()事件中,我们正在检查#pages div的.scrollTop()以查看它向下滚动的距离。如果这相当于内部格的.outerHeight()减去.height()#pages(因为.scrollTop()给出了顶部的位置),那么我们会发出警报。

当然,你可以做任何你需要加载在这里,如果你想让它之前加载最底部,只是改变了==>=和巴掌-40什么右侧装入从40个像素底部。 Something like this

$("#posts").scroll(function() { 
    if($(this).scrollTop() >= ($("#posts_content").outerHeight() - $(this).height() - 40)) { 
    alert("Reached Bottom!"); 
    } 
});​ 
+0

我想我需要一些时间消化这个:)我想我是一种小菜在这里。 sje397的第一个答案似乎很好。并且很容易理解。似乎现在对我的情况已经足够好了 – 2010-07-11 11:40:12

+0

@jiewmeng - 这是一个完整的解决方案,我误解了,如果你想检测* page *是否已经滚动(而不是'#posts'是一个滚动窗口),它看起来像这样:http://jsfiddle.net/MknA2/2/ – 2010-07-11 11:46:13

+0

我想知道这是否会有所不同,从我目前使用http://jsfiddle.net/MknA2/5/我猜你的短缺,但我只是好奇 – 2010-07-12 00:10:00