javascript - 溢出检查不起作用

Question

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

在这种情况下，我希望 checkOverflow 函数返回 true。

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;
}

知道为什么函数的 console.log 在这里返回 true 吗？

Answer 1

scrollHeight和scrollWidth分别对应实际的clientHeight和clientWdith+隐藏的高度或宽度。由于 div#txt 向右浮动，因此不会溢出。

你应该看看 box model在 this answer