如何找到元素底部的像素值（div）

我如何找到元素底部的像素值。例如。 #posts股利。我想創建一個無限的滾動條。這是我可以檢測到用戶是否已經到達/位於#posts的底部，如果是，我想加載新帖子。如何找到元素底部的像素值（div）

更新：

我猜1個選擇是使用

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

，但我想使代碼通用。所以也許我可以將這個功能轉換成插件。上面的代碼將不會考慮，填充，邊距，上述#posts等

來源

2010-07-11 Jiew Meng

這是一個壞主意，有沒有辦法產生一個正常運轉的無限滾動所有平臺上的工作或不閃爍像瘋了似的在平板電腦等 – Metalshark 2010-07-11 10:56:08

嗯，爲什麼它閃光在平板電腦上？嗯，我想一個無限的滾動將提高可用性，並將阻止用戶不得不點擊導航。一些他們可能不會做或發現它很麻煩的東西 – 2010-07-11 11:02:40

你有競爭條件，所以例如當你已經到達底部（同時按住滾動條）它的加載新內容來顯示...取決於操作系統是否有調整滾動條或平板電腦驅動程序已發出新的事件（如輕微移動），它將起作用，否則它會將您放到頁面上不可預知的地方。作爲WACOM用戶（在Mac和Windows XP/7上），jQuery的評論部分讓我發瘋。即使Nick Craver的例子不起作用 - mouseup事件從不會觸發，並且滾動條突然跟隨着鼠標。 – Metalshark 2010-07-11 11:08:04

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

來源

2010-07-11 10:57:07 sje397

任何元素如果你有一個<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!"); } });

來源

2010-07-11 11:05:02

我想我需要一些時間消化這個:)我想我是一種小菜在這裏。 sje397的第一個答案似乎很好。並且很容易理解。似乎現在對我的情況已經足夠好了 – 2010-07-11 11:40:12

@jiewmeng - 這是一個完整的解決方案，我誤解了，如果你想檢測* page *是否已經滾動（而不是'＃posts'是一個滾動窗口），它看起來像這樣：http://jsfiddle.net/MknA2/2/ – 2010-07-11 11:46:13

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

如何找到元素底部的像素值（div）

回答

相關問題