如何获取隐藏溢出的div的高度？

Question

I have a div as you will see in the jsfiddle, and I need to get the height of entire div(visible+overflowed).I tried some JQuery code but I can only get the visible height. How can I solve this?

 $(document).ready(function() { var scrolled = 0; $(".down").on("click", function() { scrolled = scrolled + 150; $("#container").animate({ scrollTop: scrolled }); }); $(".up").on("click", function() { scrolled = scrolled - 150; $("#container").animate({ scrollTop: scrolled }); }); });

 #container { border: solid 1px red; overflow-y: hidden; overflow-x: hidden; margin: auto; position: absolute; height: 400px; width: 300px; top: 0; bottom: 0; left: 0; right: 0; } .cent { text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="up">UP</button> <div id="container" class="cent"> <img id="image1" src="http://lorempixel.com/100/50/sports/1/"> <img id="image2" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image3_small" src="http://lorempixel.com/100/50/city/1/"> <img id="image4" src="http://lorempixel.com/100/50/sports/1/"> <img id="image5" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image6" src="http://lorempixel.com/100/50/city/1/"> <img id="image1" src="http://lorempixel.com/100/50/sports/1/"> <img id="image2" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image3_small" src="http://lorempixel.com/100/50/city/1/"> <img id="image4" src="http://lorempixel.com/100/50/sports/1/"> <img id="image5" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image6" src="http://lorempixel.com/100/50/city/1/"> <img id="image1" src="http://lorempixel.com/100/50/sports/1/"> <img id="image2" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image3_small" src="http://lorempixel.com/100/50/city/1/"> <img id="image4" src="http://lorempixel.com/100/50/sports/1/"> <img id="image5" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image6" src="http://lorempixel.com/100/50/city/1/"> <img id="image1" src="http://lorempixel.com/100/50/sports/1/"> <img id="image2" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image3_small" src="http://lorempixel.com/100/50/city/1/"> <img id="image4" src="http://lorempixel.com/100/50/sports/1/"> <img id="image5" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image6" src="http://lorempixel.com/100/50/city/1/"> <img id="image1" src="http://lorempixel.com/100/50/sports/1/"> <img id="image2" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image3_small" src="http://lorempixel.com/100/50/city/1/"> <img id="image4" src="http://lorempixel.com/100/50/sports/1/"> <img id="image5" src="http://lorempixel.com/100/50/fashion/1/"> <img id="image6" src="http://lorempixel.com/100/50/city/1/"> </div> <button class="down">Down</button>

Any advice is highly welcome. Thanks!

Answer 1

Use scrollHeight instead ( a DOM element property ):

$(selector)[0].scrollHeight

so in your example:

var height= $("#container")[0].scrollHeight;

or (as Vohuman points out):

var height= $("#container").prop("scrollHeight");