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

Question

如果div有溢出元素，请使用jquery检查我有一个固定高度的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，如果你需要测试这两种情况下。

Answer 3

部分基于Mohsen的答案（增加的第一个条件涵盖了在父母之前隐藏孩子的情况）：

jQuery.fn.isChildOverflowing = function (child) {
  var p = jQuery(this).get(0);
  var el = jQuery(child).get(0);
  return (el.offsetTop < p.offsetTop || el.offsetLeft < p.offsetLeft) ||
    (el.offsetTop + el.offsetHeight > p.offsetTop + p.offsetHeight || el.offsetLeft + el.offsetWidth > p.offsetLeft + p.offsetWidth);};

然后就做：

jQuery('#parent').isChildOverflowing('#child');