CODEWITHSUNDEEP
javascriptjquery
Petre Gabriel
Petre Gabriel

Reputation: 141

How to get height of a div with overflow hidden?

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!

Upvotes: 0

Views: 2307

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

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

Upvotes: 5

Related Questions