How to get full height UL with overflow kit?

Question

I have UL with a set of overflow-y:scroll; so that it scrolls. How to get the full height of the list since $(ul).height() just gives the height of the scroll viewport not the height of the full list.

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> 

Things like Get the full height of an HTML element partially hidden by overflow: hidden with JQuery / Javascript does not work, since there is no inner shell, there is only a list.

I am trying to get a list to scroll to the bottom when I add a new item, but ...

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

Answer 1

Use the scrollHeight DOM property supported by all modern browsers (even IE):

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

Alternatively, you can select the first and last item in the list, get the top offset and align them from each other. Add the height of the final list item and the result will be equivalent to scrollHeight (after adding the upper and lower paddings of 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")); 

Note. The first method is much more efficient. The second method may not give the correct result when the last element is absolutely positioned or floating.

Answer 2

You can try iterating through LI and adding their height together:

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

Answer 3

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