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

Question

我有一个 div，你将在 jsfiddle 中看到，我需要获得整个 div 的高度（可见 + 溢出）。我尝试了一些 JQuery 代码，但我只能获得可见高度。我该如何解决这个问题？

$(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>

非常欢迎任何建议。谢谢！

Answer 1

使用scrollHeight替代（DOM元素属性）：

$(selector)[0].scrollHeight

所以在你的例子中：

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

或（如 Vohuman 指出的）：

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