检查与jquery，如果div有溢出元素
我有一个固定的高度和overflow:hidden;的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!!"); }
另外，如果您需要testing这两种情况，则可以通过scrollHeight更改scrollWidth 。
一种方法是检查scrollTop本身。 给内容一个大于它的大小的滚动值，然后检查它的scrollTop是否为0（如果它不是0，它有溢出）。
部分基于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');
所以我用溢出jQuery库： https ： //github.com/kevinmarx/overflowing
安装库之后，如果要将overflowing的类分配给所有溢出的元素，只需运行：
$('.targetElement').overflowing('.parentElement')
然后这会使类overflowing ，如<div class="targetElement overflowing">所有元素。 然后，您可以将其添加到某个事件处理程序（click，mouseover）或其他将运行上述代码的函数，以便dynamic更新。
用简单的英文：获取父元素。 检查它的高度，并保存该值。 然后遍历所有的子元素，并检查他们的个人身高。
这是肮脏的，但你可能会得到基本的想法： http : //jsfiddle.net/VgDgz/
这是一个纯粹的jQuery解决scheme，但是很麻烦：
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解决scheme。 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(); } });
希望这可以帮助。
