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

Question

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

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

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

Answer 1

实际上你不需要任何jQuery来检查是否发生了溢出。使用element.offsetHeight，element.offsetWidth，element.scrollHeight和element.scrollWidth可以判断，如果你的元素有比它的规模更大的内容：if&nbsp;(element.offsetHeight&nbsp;<&nbsp;element.scrollHeight&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;element.offsetWidth&nbsp;<&nbsp;element.scrollWidth)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;your&nbsp;element&nbsp;have&nbsp;overflow}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;your&nbsp;element&nbsp;doesn't&nbsp;have&nbsp;overflow}见动作中的例子：小提琴但是如果你想知道元素中的元素是否可见，那么你需要做更多的计算。在可见性方面，子元素有三种状态：如果您想要计算半可见项目，那么它将是您需要的脚本：var&nbsp;invisibleItems&nbsp;=&nbsp;[];for(var&nbsp;i=0;&nbsp;i<element.childElementCount;&nbsp;i++){ &nbsp;&nbsp;if&nbsp;(element.children[i].offsetTop&nbsp;+&nbsp;element.children[i].offsetHeight&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.offsetTop&nbsp;+&nbsp;element.offsetHeight&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.children[i].offsetLeft&nbsp;+&nbsp;element.children[i].offsetWidth&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.offsetLeft&nbsp;+&nbsp;element.offsetWidth&nbsp;){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;invisibleItems.push(element.children[i]); &nbsp;&nbsp;&nbsp;&nbsp;}}如果你不想计算半可见数，你可以计算一点点差异。

Answer 2

我和OP有同样的问题，这些答案都不符合我的需求。我需要一个简单的条件，简单的需要。这是我的答案：if&nbsp;($("#myoverflowingelement").prop('scrollWidth')&nbsp;>&nbsp;$("#myoverflowingelement").width()&nbsp;)&nbsp;{ &nbsp;&nbsp;alert("this&nbsp;element&nbsp;is&nbsp;overflowing&nbsp;!!");}else&nbsp;{ &nbsp;alert("this&nbsp;element&nbsp;is&nbsp;not&nbsp;overflowing!!");}此外，您还可以改变scrollWidth的scrollHeight，如果你需要测试这两种情况下。

Answer 3

部分基于Mohsen的答案（增加的第一个条件涵盖了在父母之前隐藏孩子的情况）：jQuery.fn.isChildOverflowing&nbsp;=&nbsp;function&nbsp;(child)&nbsp;{ &nbsp;&nbsp;var&nbsp;p&nbsp;=&nbsp;jQuery(this).get(0); &nbsp;&nbsp;var&nbsp;el&nbsp;=&nbsp;jQuery(child).get(0); &nbsp;&nbsp;return&nbsp;(el.offsetTop&nbsp;<&nbsp;p.offsetTop&nbsp;||&nbsp;el.offsetLeft&nbsp;<&nbsp;p.offsetLeft)&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;(el.offsetTop&nbsp;+&nbsp;el.offsetHeight&nbsp;>&nbsp;p.offsetTop&nbsp;+&nbsp;p.offsetHeight&nbsp;||&nbsp;el.offsetLeft&nbsp;+&nbsp;el.offsetWidth&nbsp;>&nbsp;p.offsetLeft&nbsp;+&nbsp;p.offsetWidth);};然后就做：jQuery('#parent').isChildOverflowing('#child');