使用jQuery检查div是否包含溢出元素

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

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

您实际上不需要任何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]);
    }

}

而且，如果您不希望计算半可见，则可以进行一些计算。

我有与OP相同的问题，而这些答案都不符合我的需求。我需要一个简单的条件，一个简单的需求。

这是我的答案：

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

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

所以我使用了溢出的jQuery库：https : //github.com/kevinmarx/overflowing

安装库之后，如果要将类分配overflowing给所有溢出的元素，只需运行：

$('.targetElement').overflowing('.parentElement')

然后overflowing，这将给class ，就像 <div class="targetElement overflowing">所有正在溢出的元素一样。然后，您可以将其添加到将运行上述代码的事件处理程序（单击，鼠标悬停）或其他函数中，以便动态更新。

部分基于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');

一种方法是对照自己检查scrollTop。为内容提供一个大于其大小的滚动值，然后检查其scrollTop是否为0（如果不为0，则发生溢出）。

http://jsfiddle.net/ukvBf/

用简单的英语来说：获取父元素。检查它的高度，然后保存该值。然后遍历所有子元素并检查它们各自的高度。

这很脏，但是您可能会得到基本的想法：http : //jsfiddle.net/VgDgz/

这是一个纯jQuery解决方案，但很杂乱：

var div_height = $(this).height();
var vertical_div_top_position = $(this).offset().top;
var lastchild_height = $(this).children('p:last-child').height();
var vertical_lastchild_top_position = $(this).children('p:last-child').offset().top;
var vertical_lastchild_bottom_position = lastchild_height + vertical_lastchild_top_position;
var real_height = vertical_lastchild_bottom_position - vertical_div_top_position;

if (real_height > div_height){
    //overflow div
}

这是对我有用的jQuery解决方案。offsetWidth等不起作用。

function is_overflowing(element, extra_width) {
    return element.position().left + element.width() + extra_width > element.parent().width();
}

如果这样不起作用，请确保元素的父级具有所需的宽度（个人而言，我必须使用parent().parent())。position是相对于父级的宽度。我也将其包括在内，extra_width因为我的元素（“标签”）包含的图像花费的时间很少）加载，但是在函数调用期间它们的宽度为零，从而破坏了计算。要解决这个问题，我使用以下调用代码：

var extra_width = 0;
$(".tag:visible").each(function() {
    if (!$(this).find("img:visible").width()) {
        // tag image might not be visible at this point,
        // so we add its future width to the overflow calculation
        // the goal is to hide tags that do not fit one line
        extra_width += 28;
    }
    if (is_overflowing($(this), extra_width)) {
        $(this).hide();
    }
});

希望这可以帮助。

我通过在溢出的div中添加另一个div来解决此问题。然后，您比较2个div的高度。

<div class="AAAA overflow-hidden" style="height: 20px;" >
    <div class="BBBB" >
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

和js

    if ($('.AAAA').height() < $('.BBBB').height()) {
        console.log('we have overflow')
    } else {
        console.log('NO overflow')
    }

这看起来更容易...