Tengo un div como verá en el jsfiddle, y necesito obtener la altura de todo el div (visible desbordado). Intenté un código JQuery pero solo puedo obtener la altura visible. ¿Como puedo resolver esto?

$(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; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;button class="up"{amp}gt;UP{amp}lt;/button{amp}gt; {amp}lt;div id="container" class="cent"{amp}gt; {amp}lt;img id="image1" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image2" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image3_small" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image4" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image5" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image6" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image1" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image2" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image3_small" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image4" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image5" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image6" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image1" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image2" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image3_small" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image4" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image5" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image6" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image1" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image2" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image3_small" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image4" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image5" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image6" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image1" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image2" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image3_small" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;img id="image4" src="https://lorempixel.com/100/50/sports/1/"{amp}gt; {amp}lt;img id="image5" src="https://lorempixel.com/100/50/fashion/1/"{amp}gt; {amp}lt;img id="image6" src="https://lorempixel.com/100/50/city/1/"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button class="down"{amp}gt;Down{amp}lt;/button{amp}gt; 

Cualquier consejo es muy bienvenido. ¡Gracias!

Utilice scrollHeight en scrollHeight lugar ( una propiedad del elemento DOM ):

 $(selector)[0].scrollHeight 

entonces en tu ejemplo:

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

o (como señala Vohuman):

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