JS check if contents overflowing verticaly

Question

Need to make so do something if its overflowing Verticaly. Lead me towards right direction.

Exmaple:

.contents {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<div class="contents">
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
CONTENT CCC<br>
<div>


<!-- This would result to do an action. ->

[This question](http://stackoverflow.com/questions/6853293/how-do-i-get-the-height-of-a-divs-full-content-with-jquery) might help. — Draco18s no longer trusts SE, Apr 17 '17 at 17:15
@MikeMcCaughan Checked it allready, it determines the overflow horisontaly not verticaly. — T.Lowly, Apr 17 '17 at 17:20
Then, as it says, [edit] your question to include what you've tried before. — Heretic Monkey, Apr 17 '17 at 17:23
You don't mention that you've seen that question, nor how that question failed to help you. We're looking for an indication that you've done your research. — Heretic Monkey, Apr 17 '17 at 17:31

score 1 · Answer 1 · answered Apr 17 '17 at 17:18

1

Add an inner wrapper.

<div class="contents">
  <div class="inner">
    CONTENT CCC<br>
    CONTENT CCC<br>
    CONTENT CCC<br>
    CONTENT CCC<br>
    CONTENT CCC<br>
    CONTENT CCC<br>
    CONTENT CCC<br>
    CONTENT CCC<br>
  </div>
<div>

Then you can get document.querySelector('.inner').outerHeight and if its greater than the .contents height, you have your answer.

answered Apr 17 '17 at 17:18

Geuis

41,122
56
157
219

This is a valid point, though I need to stop it overflowing while doing few other things at it. But thanks! Why I didint even think of trying it. – T.Lowly Apr 17 '17 at 17:23

score 1 · Accepted Answer · answered Apr 17 '17 at 17:20

https://jsfiddle.net/qq3w1k3a/

If the height is set via CSS, you can check the height specified in the styling against the scrollHeight. a.e the following will alert true or false depending on if the supplied element's scroll height is larger than it's specified size.

function check_height(ele) {
  let styleHeight = +getComputedStyle(ele).getPropertyValue('height').slice(0,-2);
  alert(ele.scrollHeight > styleHeight);
}

Edit: to elaborate on this +getComputedStyle(ele).getPropertyValue('height').slice(0,-2);

getComputedStyle(ele) is a window method that will, as the name suggests, grab all the styling of the specified element. The returned object has a method called getPropertyValue that allows you to specify what property you would like to grab(in this case height).

.slice(0, -2) is just a normal array method that removes the last two characters of the string. (since strings are just an array of characters this works)

the + sign in front of all of it is to automatically convert the value to an integer instead of keeping it as a string.

Yep it work, its almost kinda same as adding another Div and comparing it, like @geuis wrote. but this approach is more swift, gonna go analyse stuff now haha, thanks :) EDIT: Allright, I understood the approach of it, Im just not familiar with some functions of Js yet, kinda fresh on it. Thanks for the explination aswell! — T.Lowly, Apr 17 '17 at 17:25
Sure thing @T.Lowly - I wrote up an explanation for this as well as other concepts in an article a little while back. https://medium.com/wdstack/27-everyday-javascript-tricks-for-beginner-web-developers-2c04d572dde -- feel free to check it out! — zfrisch, Apr 17 '17 at 17:30

JS check if contents overflowing verticaly

2 Answers2