使用 jquery 检查 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]);
}


}

如果你不想计算半可见，你可以用一点点差异来计算。

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

这是肮脏的，但你可能会得到基本的想法: Http://jsfiddle.net/vgdgz/

一种方法是对照 scrollTop 本身检查 scrollTop。给内容一个大于其大小的滚动值，然后检查其 scrollTop 是否为0(如果不为0，则为溢出)

Http://jsfiddle.net/ukvbf/

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

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

我也有同样的问题，但没有一个答案符合我的需要。我需要一个简单的条件，一个简单的需要。

我的回答是:

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

另外，如果您需要测试任何一种情况，您可以通过 scrollHeight改变 scrollWidth。

因此，我使用了溢出的 jquery 库: https://github.com/kevinmarx/overflowing

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

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

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

这就是我使用的 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 来修复这个问题。 然后比较两个 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>

还有 J

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

这看起来容易多了。