如何通過溢出設置獲得UL的全高？

我有一個overflow-y:scroll;設置爲滾動的UL。如何獲得列表的全高，因爲$(ul).height()只是給出滾動視口的高度而不是完整列表的高度。如何通過溢出設置獲得UL的全高？

HTML

<ul style="overflow-y:scroll; height: 50px;"> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
</ul>

之類的東西Get The Full Height Of HTML Element That's Partially Hidden By Overflow:Hidden With JQuery/Javascript不會工作，因爲沒有內包裝材料中，只有列表中。

我試圖獲取列表，當我追加一個新項目，以滾動至底部，但是...

$("ul").attr({ scrollTop: NeedHeightHere });

來源

2011-12-16 Justin808

據我可以告訴提供的答案產生相同的答案：http://jsfiddle.net/kasdega/VJwsz/ – kasdega 2011-12-16 23:47:32

使用scrollHeight DOM屬性，所有現代瀏覽器都支持（甚至是IE）：

var wholeHeight = $("ul")[0].scrollHeight;

或者，您可以選擇列表中的第一個和最後一個項目，獲取頂部偏移量，然後相互減去這些項目。添加最終列表元素的高度，結果等同於scrollHeight（在添加UL的頂部和底部填充之後）。

var ul = $("ul"), 
    last = ul.children().last(); 
var wholeHeight = last.offset().top - ul.children().first().offset().top 
        + last.outerHeight() 
        + parseFloat(ul.css("padding-top")) 
        + parseFloat(ul.css("padding-bottom"));

注意：第一種方法效率更高。當最後一個元素被絕對定位或浮動時，第二種方法可能無法產生正確的結果。

來源

2011-12-16 23:35:09

你可以用`scrollTop的（）`設置位置`$（」 ul'）。scrollTop（$（'ul'）[0] .scrollHeight）;` – mrtsherman 2011-12-16 23:39:38

你可能想嘗試通過李的迭代和增加自己的身高一起：

var totalHeight=0; 
$("ul li").each(function() { 
    totalHeight += $(this).outerHeight(true); // to include margins 
});

來源

2011-12-16 23:34:12 kasdega

$('#your_div')[0].scrollHeight

來源

2014-07-13 11:31:32

如何通過溢出設置獲得UL的全高？

回答

相關問題