Overflow check not working

Question

https://jsfiddle.net/basickarl/apts370w/1/

I'm expecting the checkOverflow function to return true in this case.

HTML:

<div style="float:right;">
  <div id="z">
    <div id="txt">
      345345345345345345345345345345345
    </div>
  </div>
</div>

Javascript:

console.log(checkOverflow(document.getElementById('z')));

function checkOverflow(el) {

  var curOverflow = el.style.overflow;

  if (!curOverflow || curOverflow === 'visible')
    el.style.overflow = 'hidden';

  var isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

  el.style.overflow = curOverflow;

  return isOverflowing;
};

CSS:

div#z {
  position: relative;
  background: red;
  width: 50px;
  height: 50px;
  overflow: auto;
}

div#txt {
  background: lightblue;
  float: right;
}

Any idea why the console.log of the function returns true here?

Any answer actually answered your question? – jeerbl Aug 17 '16 at 08:26 — jeerbl, Aug 17 '16 at 08:26

score 2 · Answer 1 · edited May 23 '17 at 11:51

2

scrollHeight and scrollWidth correspond to the actual clientHeight and clientWdith + the hidden height or width. Since div#txt is floated to the right, it doesn't overflow.

You should have a look at the box model and at this answer as well.

edited May 23 '17 at 11:51

Community

1
1

answered Feb 14 '16 at 21:03

jeerbl

7,537
5
25
39

Oriol · Answer 2 · 2016-02-14T21:10:48.933

The problem is that #txt is floated to the right, so it overflows towards the left.

But with the default left-to-right direction it's not possible to scroll towards the left.

However, you can if you use a right-to-left direction

#z { direction: rtl; }

function checkOverflow(el) {
  var curOverflow = el.style.overflow;
  if (!curOverflow || curOverflow === 'visible')
    el.style.overflow = 'hidden';
  var isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
  el.style.overflow = curOverflow;
  return isOverflowing;
}
console.log(checkOverflow(document.getElementById('z')));

div#z {
  position: relative;
  background: red;
  width: 50px;
  height: 50px;
  overflow: auto;
  direction: rtl;
}
div#txt {
  background: lightblue;
  float: right;
}

<div style="float:right;">
  <div id="z">
    <div id="txt">
      345345345345345345345345345345345
    </div>
  </div>
</div>

Of course, if then content overflows towards the right (e.g. you change to float: left), you will have the same problem.

If you want a more general approach, you can use getBoundingClientRect:

var rect = el.getBoundingClientRect();
var isOverflowing = [].every.call(el.children, function(child) {
  var childRect = child.getBoundingClientRect();
  return childRect.left < rect.left
    || childRect.right > rect.right
    || childRect.top < rect.top
    || childRect.bottom > rect.bottom;
});

function checkOverflow(el) {
  var curOverflow = getComputedStyle(el).overflow;
  if (!curOverflow || curOverflow === 'visible')
    el.style.overflow = 'hidden';
  var rect = el.getBoundingClientRect();
  var isOverflowing = [].every.call(el.children, function(child) {
    var childRect = child.getBoundingClientRect();
    return childRect.left < rect.left
      || childRect.right > rect.right
      || childRect.top < rect.top
      || childRect.bottom > rect.bottom;
  });
  el.style.overflow = curOverflow;
  return isOverflowing;
}
console.log(checkOverflow(document.getElementById('z')));

div#z {
  position: relative;
  background: red;
  width: 50px;
  height: 50px;
  overflow: auto;
}
div#txt {
  background: lightblue;
  float: right;
}

<div style="float:right;">
  <div id="z">
    <div id="txt">
      345345345345345345345345345345345
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Feb 14 '16 at 20:51

0

This is my solution

https://jsfiddle.net/apts370w/3/

The problem is that is not a inline element, if you change to span tag it works

I change this too

el.offsetWidth //instead of clientWidth

answered Feb 14 '16 at 20:51

Marcos Pérez Gude

21,869
4
38
69

1

This only "works" because the selector `div#txt` no longer applies, and then it's no longer floated to the right. – Oriol Feb 14 '16 at 20:53
If you put the float again, it works again, because the tag changes to . Check it! – Marcos Pérez Gude Feb 15 '16 at 08:31
See the fiddle : https://jsfiddle.net/apts370w/7/ . So you are wrong in this case. With inline elements this works perfectly – Marcos Pérez Gude Feb 15 '16 at 08:32

Overflow check not working

3 Answers3