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

【问题标题】：Check with jquery if div has overflowing elements如果 div 有溢出元素，请使用 jquery 检查
【发布时间】：2011-12-01 21:20:51
【问题描述】：

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

我想用 jQuery 检查 div 是否有超出 div 固定高度的元素溢出。我该怎么做？

【问题讨论】：

我可能是错的，但我认为没有一种神奇的 jQuery 方法可以检查一个元素是否在另一个元素之外。您可能需要检查 div 中元素的高度和位置，并进行一些计算以查看它们是否溢出。
是的，我正在考虑检查div顶部的位置与div内最后一个子元素底部的位置之间的差异是否大于div的高度跨度>
detect elements overflow using jquery的可能重复

标签： javascript jquery html

【解决方案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]);
    }

}

如果你不想计算半可见的，你可以稍微计算一下。

【讨论】：

如果我错了，请纠正我，但这似乎不再适用 Chrome V.20.0.1132.57 。如果更改 div 内的文字，背景颜色保持黄色，jsbin.com/ujiwah/25/edit#javascript,html,live
@Robbie <p> 是块级元素，宽度为 100%。如果您想尝试使用 p 中的大量文本进行此操作，只需创建 p{display:inline}。这样里面的文字决定了p的宽度。
适用于大多数情况，但不会用 CSS 表格（显示表格单元格、表格 rwo、表格）覆盖场景 -
我了解 offsetHeight 包括边框，不计入可滚动区域。只是一个注释。（如果我错了，请纠正我）
@Lodewijk 我也看到了同样的情况。也许正确的属性是 clientHeight？

【解决方案2】：

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

这是我的答案：

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

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

【讨论】：

谢谢，这对我有用。只需要一个 jquery 中的简单示例，而不是普通 js。
不适用于具有填充/边距的元素。使用 outerWidth(true) 插入宽度
在 ie 中不工作，在 mozilla 和 chrome 中工作正常。
这个脚本有一些奇怪的效果。在 Chrome 中测试。我重写它以检查高度（使用 OuterHeight），如果我使用 F5 重新加载页面以检查脚本，或从另一个页面导航到它，它总是以溢出 = true 的形式返回，但如果我使用 ctrl-F5 它来了返回溢出=假。这是在测试应该返回错误的情况时。当它应该是真的时，它总是有效的。
好吧，我自己想通了。我将脚本标签包装在 window.addEventListener('DOMContentLoaded') 中，因此它们可以与我异步加载的 jquery 和其他文件一起使用。但是在那个阶段运行这个脚本显然会返回错误的读数，所以对于这个脚本，我只用“加载”替换了 DOMContentLoaded，以进一步延迟脚本的执行。现在它每次都返回正确的结果。就我的目的而言，它一直等到页面加载后才运行它是非常好的，然后我什至可以添加一个动画来突出用户对“阅读更多”按钮的注意力。

【解决方案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');

【讨论】：

【解决方案4】：

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

http://jsfiddle.net/ukvBf/

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

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

这看起来更容易......

【讨论】：

【解决方案7】：

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

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

【讨论】：

这是一个很好的例子，但是位置呢。如果一个元素绝对定位在父元素的顶部，即使高度低于父元素，它也可能溢出。
当然，可能有很多不同的情况可能导致它。只是一个可能从哪里开始的快速示例。 Op 的具体情况可能会定义需要检查的内容

【解决方案8】：

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

【讨论】：

【解决方案9】：

这是对我有用的 jQuery 解决方案。 offsetWidth 等无效。

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

如果这不起作用，请确保元素的父级具有所需的宽度（就我个人而言，我不得不使用 parent().parent())。position 是相对于父级的。我还包括了 extra_width，因为我的元素("tags") 包含加载时间短的图像，但在函数调用期间它们的宽度为零，从而破坏了计算。为了解决这个问题，我使用以下调用代码：

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

希望这会有所帮助。

【讨论】：