如果div有溢出元素,请使用jquery检查

Question

我有一个固定高度的div overflow:hidden;

我想用jQuery检查div是否有溢出超过div的固定高度的元素.我怎样才能做到这一点？

Answer 1

实际上你不需要任何jQuery来检查是否发生了溢出.使用element.offsetHeight,element.offsetWidth,element.scrollHeight和element.scrollWidth可以判断,如果你的元素有比它的规模更大的内容:

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

见动作中的例子:小提琴

但是如果你想知道元素中的元素是否可见,那么你需要做更多的计算.在可见性方面,子元素有三种状态:

如果您想要计算半可见项目,那么它将是您需要的脚本:

var invisibleItems = [];
for(var i=0; i<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      element.offsetLeft + element.offsetWidth ){

        invisibleItems.push(element.children[i]);
    }

}

如果你不想计算半可见数,你可以计算一点点差异.

Answer 2

我和OP有同样的问题,这些答案都不符合我的需求.我需要一个简单的条件,简单的需要.

这是我的答案:

if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

此外,您还可以改变scrollWidth的scrollHeight,如果你需要测试这两种情况下.