用jquery检查div是否有溢出元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (36)

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

如果div的元素超出div的固定高度,我想检查jQuery。我怎样才能做到这一点?

提问于
用户回答回答于

实际上,你不需要任何jQuery来检查是否发生溢出。使用element.offsetHeightelement.offsetWidthelement.scrollHeightelement.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]);
    }

}

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

用户回答回答于

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

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

此外,如果需要测试这两种情况scrollWidthscrollHeight则可以更改。

扫码关注云+社区