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

Question

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

的div

我想用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
}

请参阅示例实际操作：Fiddle

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

如果你想计算半可见项目，那就是你需要的脚本：

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');

Answer 4

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

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

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

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

Answer 5

一种方法是检查scrollTop自身。给内容一个大于其大小的滚动值，然后检查它的scrollTop是否为0（如果它不是0，它有溢出。）

http://jsfiddle.net/ukvBf/

Answer 6

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

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

Answer 7

这是一个纯粹的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
}

Answer 8

这是适合我的jQuery解决方案。 offsetWidth等没有工作。

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

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

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();
    }
});

希望这有帮助。

Answer 9

我通过在溢出的div中添加另一个div来解决此问题。 然后比较两个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')
    }

这看起来更容易...