Javascript 使用 jquery 检查 div 是否有溢出元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7668636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check with jquery if div has overflowing elements
提问by Justin Meltzer
I have a div with a fixed height and overflow:hidden;
我有一个固定高度的 div 和 overflow:hidden;
I want to check with jQuery if the div has elements that are overflowing past the fixed height of the div. How can I do this?
我想用 jQuery 检查 div 是否有超出 div 固定高度的元素。我怎样才能做到这一点？
回答by Mohsen
You actually don't need any jQuery to check if there is an overflow happening or not. Using element.offsetHeight, element.offsetWidth, element.scrollHeightand element.scrollWidthyou can determine if your element have content bigger than it's size:
您实际上不需要任何 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
}
See example in action: Fiddle
参见实际示例：Fiddle
But if you want to know what element inside your element is visible or not then you need to do more calculation. There is three states for a child element in terms of visibility:
但是，如果您想知道元素中的哪个元素可见或不可见，则需要进行更多计算。就可见性而言，子元素有三种状态：
If you want to count semi-visible items it would be the script you need:
如果你想计算半可见的项目，这将是你需要的脚本：
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]);
}
}
And if you don't want to count semi-visible you can calculate with a little difference.
如果你不想计算半可见，你可以稍微计算一下。
回答by sidney
I had the same question as the OP, and none of those answers fitted my needs. I needed a simple condition, for a simple need.
我和 OP 有同样的问题，但这些答案都不符合我的需求。我需要一个简单的条件，为了一个简单的需要。
Here's my answer:
这是我的回答：
if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
alert("this element is overflowing !!");
}
else {
alert("this element is not overflowing!!");
}
Also, you can change scrollWidthby scrollHeightif you need to test the either case.
此外，您还可以改变scrollWidth的scrollHeight，如果你需要测试这两种情况下。
回答by maudulus
So I used the overflowing jquery library: https://github.com/kevinmarx/overflowing
所以我使用了溢出的jquery库：https: //github.com/kevinmarx/overflowing
After installing the library, if you want to assign the class overflowingto all overflowing elements, you simply run:
安装库后，如果要将类分配overflowing给所有溢出元素，只需运行：
$('.targetElement').overflowing('.parentElement')
This will then give the class overflowing, as in <div class="targetElement overflowing">to all elements that are overflowing. You could then add this to some event handler(click, mouseover) or other function that will run the above code so that it updates dynamically.
这将给 class overflowing，就像 <div class="targetElement overflowing">所有溢出的元素一样。然后，您可以将其添加到某个事件处理程序（单击、鼠标悬停）或其他将运行上述代码的函数中，以便它动态更新。
回答by brauliobo
Partially based on Mohsen's answer (the added first condition covers the case where the child is hidden before the parent):
部分基于 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);
};
Then just do:
然后就这样做：
jQuery('#parent').isChildOverflowing('#child');
回答by Joseph Marikle
One method is to check scrollTop against itself. Give the content a scroll value larger than its size and then check to see if its scrollTop is 0 or not (if it is not 0, it has overflow.)
一种方法是针对自身检查 scrollTop。给内容一个大于其大小的滚动值，然后检查其 scrollTop 是否为 0（如果不是 0，则表示溢出。）
回答by Doozer Blake
In plain English: Get the parent element. Check it's height, and save that value. Then loop through all the child elements and check their individual heights.
简单来说：获取父元素。检查它的高度，并保存该值。然后遍历所有子元素并检查它们各自的高度。
This is dirty, but you might get the basic idea: http://jsfiddle.net/VgDgz/
这很脏，但你可能会得到基本的想法：http: //jsfiddle.net/VgDgz/
回答by Justin Meltzer
Here's a pure jQuery solution, but it's rather messy:
这是一个纯 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
}
回答by Dennis Golomazov
This is the jQuery solution that worked for me. offsetWidthetc. didn't work.
这是对我有用的 jQuery 解决方案。offsetWidth等没有工作。
function is_overflowing(element, extra_width) {
return element.position().left + element.width() + extra_width > element.parent().width();
}
If this doesn't work, ensure that elements' parent has the desired width (personally, I had to use parent().parent()). positionis relative to the parent. I've also included extra_widthbecause my elements ("tags") contain images which take small time to load, but during the function call they have zero width, spoiling the calculation. To get around that, I use the following calling code:
如果这不起作用，请确保元素的父级具有所需的宽度（就个人而言，我必须使用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();
}
});
Hope this helps.
希望这可以帮助。
回答by alex toader
I fixed this by adding another div in the one that overflows. Then you compare the heights of the 2 divs.
我通过在溢出的 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>
and the js
和 js
if ($('.AAAA').height() < $('.BBBB').height()) {
console.log('we have overflow')
} else {
console.log('NO overflow')
}
This looks easier...
这看起来更容易...
