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

Question

我有一个固定高度和overflow:hidden;的 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
}

参见实际示例： 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!!");
}

此外，如果您需要测试这两种情况，您可以通过scrollHeight更改scrollWidth 。

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

我通过在溢出的 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')
    }

这看起来更容易...

Answer 6

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

http://jsfiddle.net/ukvBf/

Answer 7

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

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

Answer 8

这是对我有用的 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();
    }
});

希望这可以帮助。

Answer 9

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