表格體中的滾動位置

我想在HTML表格主體中實現無限滾動（使用基於AJAX的加載程序）。表格體中的滾動位置

我的HTML看起來是這樣的：

<table> 
    <thead> 
    <tr><th>Column</th></tr> 
    </thead> 
    <tbody> 
    <tr><td>Row 1</td></tr> 
    <tr><td>Row 2</td></tr> 
    </tbody> 
</table>

我上<tbody>像這樣滾動條：

tbody { 
    height:10em; /* Otherwise the tbody expands to fit all rows */ 
    overflow:auto; 
}

爲了能夠做任何事情，當用戶滾動至底部，我需要能夠獲得<tbody>的滾動位置。在我看到的所有（jQuery）無限滾動實現（such as this one）中，它們會從容器高度中減去內容高度，並將其與.scrollTop（）值進行比較。

不幸的是，這可能不適用於<tbody>，這是視窗和滾動內容的容器。 $("tbody").height()返回可見的（即：「縮小」）大小，但我不知道如何獲得表體的完整（可查看+隱藏）大小。（FWIW，$("tbody").scrollTop()當滾動到底部時返回「大」數字，正如我所期望的那樣）。

有什麼辦法可以做到這一點？

來源

2010-04-22 Craig Walker

*蟋蟀*。觀點不斷上升，但沒有活動。我猜測這在目前的瀏覽器中根本無法實現。 – 2010-05-06 19:42:19

tbody.scrollHeight適合我。

來源

2010-09-01 01:44:32

你使用什麼瀏覽器？ – 2010-09-02 15:21:04

FF 3.6.8。 http://devsandbox.nfshost.com/tbody-scroll-test.html – 2010-09-10 08:46:46

這很好，只是它是JavaScript（而不是jQuery），因此容易出現（IE）瀏覽器錯誤/不一致（請參見http：//www.quirksmode .ORG/DOM/w3c_cssom.html＃T36）。然而，這對tbody解決方案來說可能已經足夠了。 – 2010-09-29 16:05:55

當您需要隱藏高度時，您可以將高度設置爲自動，抓住它，然後將高度返回到強制大小。

var $tbody = $('tbody'); 
var initTbodyHeight = $tbody.height(); 
$tbody.css('height','auto'); 
var autoTbodyHeight = $tbody.height(); 
$tbody.css('height',initTbodyHeight);

即使IE瀏覽器也應該處理得足夠快，不會有任何人眼可見的閃爍。

來源

2010-05-15 00:28:07 mVChr

表格體中的滾動位置

回答

相關問題