溢出检查不起作用

Overflow check not working

本文关键字：不起作用 溢出检查      更新时间：2023-09-26

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吗？

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

你应该看看盒子模型和这个答案。

问题是#txt向右浮动，因此向左溢出。

但是使用默认的从左到右方向时，无法向左滚动。

但是，如果您使用从右到左的方向，则可以

#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>

当然，如果内容向右溢出(例如，您更改为float: left(，您将遇到同样的问题。

如果你想要一个更通用的方法，你可以使用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>

这是我

的解决方案

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

问题是它不是内联元素，如果您更改为 span 标签，它可以工作

我也改变这个

el.offsetWidth //instead of clientWidth
相关文章：