Question

我有一个overflow-y:scroll;设置的UL，所以它滚动。如何获得列表的完整高度$(ul).height()只是给出滚动视口的高度而不是完整列表的高度。

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 });

Answer 1

使用所有现代浏览器支持的 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"));

注意：第一种方法效率更高。当最后一个元素绝对定位或浮动时，第二种方法可能无法产生正确的结果。

Answer 2

你可能想尝试迭代LI并将它们的高度加在一起：

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

Answer 3

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

如何获得溢出设置的UL的全高？

3 个答案: