blocks|key|763272|text|您实际上不需要任何jQuery来检查是否发生溢出。使用element.offsetHeight、element.offsetWidth、element.scrollHeight和element.scrollWidth可以确定元素的内容是否大于其大小：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|763273|if+(element.offsetHeight+<+element.scrollHeight+%7C%7C
++++element.offsetWidth+<+element.scrollWidth)+{
++++//+your+element+have+overflow
}+else+{
++++//+your+element+doesn't+have+overflow
}|code-block|syntax|javascript|763274|查看实际操作示例：Fiddle|763275|但是，如果您想知道元素中的哪个元素可见或不可见，那么您需要做更多的计算。就可见性而言，子元素有三种状态：|763276|​|763277|📷|atomic|763278|763279|如果您想计算半可见项，则需要以下脚本：|763280|var+invisibleItems+=+[];
for(var+i=0;+i<element.childElementCount;+i%2B%2B){
++if+(element.children[i].offsetTop+%2B+element.children[i].offsetHeight+>
++++++element.offsetTop+%2B+element.offsetHeight+%7C%7C
++++++element.children[i].offsetLeft+%2B+element.children[i].offsetWidth+>
++++++element.offsetLeft+%2B+element.offsetWidth+){

++++++++invisibleItems.push(element.children[i]);
++++}

}|763281|如果你不想计算半可见的，你可以用一点差异来计算。|763282|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/element.offsetHeight|1|https://developer.mozilla.org/en/DOM/element.offsetWidth|2|https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight|3|https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollWidth|4|http://jsbin.com/ujiwah/4/edit#javascript,html,live|5|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/b3388fe6bd8987f6bc8df77373b435ab.png|imageAlt^0|R|K|1C|J|1W|K|2H|J|R|K|0|1C|J|1|1W|K|2|2H|J|3|0|0|9|6|4|0|0|0|0|1|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@$9|1V|A|1W|1|1X]|$9|1Y|A|1Z|1|20]|$9|21|A|22|1|23]|$9|24|A|25|1|26]]|E|$]]|$1|F|3|G|5|H|7|27|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|28|8|@]|D|@$9|29|A|2A|1|2B]]|E|$]]|$1|M|3|N|5|6|7|2C|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|2D|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|2E|8|@]|D|@$9|2F|A|2G|1|2H]]|E|$]]|$1|T|3|P|5|6|7|2I|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|2J|8|@]|D|@]|E|$]]|$1|W|3|X|5|H|7|2K|8|@]|D|@]|E|$I|J]]|$1|Y|3|Z|5|6|7|2L|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|2M|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]|18|$5|13|14|15|E|$16|19]]|1A|$5|13|14|15|E|$16|1B]]|1C|$5|13|14|15|E|$16|1D]]|1E|$5|13|14|15|E|$16|1F]]|1G|$5|1H|14|1I|E|$1J|1K|1L|-4]]]]

You actually don't need any jQuery to check if there is an overflow happening or not. Using <a href="https://developer.mozilla.org/en/DOM/element.offsetHeight" rel="noreferrer"><code>element.offsetHeight</code></a>, <a href="https://developer.mozilla.org/en/DOM/element.offsetWidth" rel="noreferrer"><code>element.offsetWidth</code></a> , <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight" rel="noreferrer"><code>element.scrollHeight</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollWidth" rel="noreferrer"><code>element.scrollWidth</code></a> you can determine if your element have content bigger than it's size:

<pre><code>if (element.offsetHeight &lt; element.scrollHeight ||
 element.offsetWidth &lt; element.scrollWidth) {
 // your element have overflow
} else {
 // your element doesn't have overflow
}
</code></pre>

See example in action: <a href="http://jsbin.com/ujiwah/4/edit#javascript,html,live" rel="noreferrer">Fiddle</a>

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:

<img src="https://i.stack.imgur.com/O56yk.png" alt="enter image description here">

If you want to count semi-visible items it would be the script you need:

<pre><code>var invisibleItems = [];
for(var i=0; i&lt;element.childElementCount; i++){
 if (element.children[i].offsetTop + element.children[i].offsetHeight &gt;
 element.offsetTop + element.offsetHeight ||
 element.children[i].offsetLeft + element.children[i].offsetWidth &gt;
 element.offsetLeft + element.offsetWidth ){

 invisibleItems.push(element.children[i]);
 }

}
</code></pre>

And if you don't want to count semi-visible you can calculate with a little difference.

blocks|key|763326|text|简而言之:获取父元素。检查它的高度，并保存该值。然后循环遍历所有的子元素，并检查它们各自的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|763327|这很脏，但您可能会得到基本的概念：http://jsfiddle.net/VgDgz/|offset|length|763328|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/VgDgz/^0|0|H|Q|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

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:
<a href="http://jsfiddle.net/VgDgz/" rel="nofollow">http://jsfiddle.net/VgDgz/</a>

blocks|key|763404|text|一种方法是对照scrollTop本身进行检查。赋予内容一个大于其大小的滚动值，然后检查其scrollTop是否为0(如果不是0，则它有溢出)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|763405|http://jsfiddle.net/ukvBf/|offset|length|763406|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

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.)

<a href="http://jsfiddle.net/ukvBf/" rel="nofollow">http://jsfiddle.net/ukvBf/</a>

blocks|key|546839|text|这是一个纯jQuery解决方案，但它相当混乱：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|546840|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+%2B+vertical_lastchild_top_position;
var+real_height+=+vertical_lastchild_bottom_position+-+vertical_div_top_position;

if+(real_height+>+div_height){
++++//overflow+div
}|code-block|syntax|javascript|546841|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's a pure jQuery solution, but it's rather messy:

<pre><code>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 &gt; div_height){
 //overflow div
}
</code></pre>

blocks|key|763590|text|部分基于Mohsen的回答(添加的第一个条件涵盖了子隐藏在父之前的情况)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|763591|jQuery.fn.isChildOverflowing+=+function+(child)+{
++var+p+=+jQuery(this).get(0);
++var+el+=+jQuery(child).get(0);
++return+(el.offsetTop+<+p.offsetTop+%7C%7C+el.offsetLeft+<+p.offsetLeft)+%7C%7C
++++(el.offsetTop+%2B+el.offsetHeight+>+p.offsetTop+%2B+p.offsetHeight+%7C%7C+el.offsetLeft+%2B+el.offsetWidth+>+p.offsetLeft+%2B+p.offsetWidth);
};|code-block|syntax|javascript|763592|那就这样做：|763593|jQuery('#parent').isChildOverflowing('#child');|763594|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Partially based on Mohsen's answer (the added first condition covers the case where the child is hidden before the parent):

<pre><code>jQuery.fn.isChildOverflowing = function (child) {
 var p = jQuery(this).get(0);
 var el = jQuery(child).get(0);
 return (el.offsetTop &lt; p.offsetTop || el.offsetLeft &lt; p.offsetLeft) ||
 (el.offsetTop + el.offsetHeight &gt; p.offsetTop + p.offsetHeight || el.offsetLeft + el.offsetWidth &gt; p.offsetLeft + p.offsetWidth);
};
</code></pre>

Then just do:

<pre><code>jQuery('#parent').isChildOverflowing('#child');
</code></pre>

blocks|key|547045|text|我和OP也有同样的问题，但这些答案都不符合我的需求。我需要一个简单的条件，一个简单的需求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|547046|这是我的答案：|547047|if+($("#myoverflowingelement").prop('scrollWidth')+>+$("#myoverflowingelement").width()+)+{
++alert("this+element+is+overflowing+!!");
}
else+{
+alert("this+element+is+not+overflowing!!");
}|code-block|syntax|javascript|547048|此外，如果您需要测试这两种情况，也可以通过scrollHeight更改scrollWidth。|offset|length|style|CODE|547049|entityMap^0|0|0|0|L|C|Z|B|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

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.

Here's my answer:

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

Also, you can change <code>scrollWidth</code> by <code>scrollHeight</code> if you need to test the either case.

blocks|key|763813|text|所以我使用了溢出的jquery库：https://github.com/kevinmarx/overflowing|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|763814|在安装库之后，如果您想将类overflowing分配给所有溢出的元素，您只需运行：|style|CODE|763815|$('.targetElement').overflowing('.parentElement')|code-block|syntax|javascript|763816|这将为所有溢出的元素提供类overflowing，就像在<div+class="targetElement+overflowing">中一样。然后，您可以将其添加到某个事件处理程序(单击、鼠标悬停)或其他将运行上述代码的函数中，以使其动态更新。|763817|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/kevinmarx/overflowing^0|H|14|0|0|D|B|0|0|D|B|S|13|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|14|8|@$A|15|B|16|F|G]|$A|17|B|18|F|G]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

So I used the overflowing jquery library: <a href="https://github.com/kevinmarx/overflowing" rel="nofollow">https://github.com/kevinmarx/overflowing</a>

After installing the library, if you want to assign the class <code>overflowing</code> to all overflowing elements, you simply run: 

<pre><code>$('.targetElement').overflowing('.parentElement')
</code></pre>

This will then give the class <code>overflowing</code>, as in <code>&lt;div class="targetElement overflowing"&gt;</code> 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.

blocks|key|547191|text|这就是为我工作的jQuery解决方案。offsetWidth等不起作用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|547192|function+is_overflowing(element,+extra_width)+{
++++return+element.position().left+%2B+element.width()+%2B+extra_width+>+element.parent().width();
}|code-block|syntax|javascript|547193|如果这不起作用，请确保元素的父元素具有所需的宽度(就我个人而言，我必须使用parent().parent())。position是相对于父级的。我还包含了extra_width，因为我的元素(“标签”)包含的图像加载时间很短，但在函数调用期间，它们的宽度为零，从而破坏了计算。为了解决这个问题，我使用了下面的调用代码：|547194|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+%2B=+28;
++++}
++++if+(is_overflowing($(this),+extra_width))+{
++++++++$(this).hide();
++++}
});|547195|希望这能有所帮助。|547196|entityMap^0|J|B|0|0|11|I|1K|8|25|B|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

This is the jQuery solution that worked for me. <code>offsetWidth</code> etc. didn't work.

<pre><code>function is_overflowing(element, extra_width) {
 return element.position().left + element.width() + extra_width &gt; element.parent().width();
}
</code></pre>

If this doesn't work, ensure that elements' parent has the desired width (personally, I had to use <code>parent().parent())</code>. <code>position</code> is relative to the parent. I've also included <code>extra_width</code> because 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:

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

Hope this helps.

blocks|key|547249|text|我通过在溢出的那个div中添加另一个div修复了这个问题。然后比较两个div的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|547250|<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>|code-block|syntax|javascript|547251|和js|547252|++++if+($('.AAAA').height()+<+$('.BBBB').height())+{
++++++++console.log('we+have+overflow')
++++}+else+{
++++++++console.log('NO+overflow')
++++}|547253|这看起来更简单..。|547254|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I fixed this by adding another div in the one that overflows.
Then you compare the heights of the 2 divs.

<pre><code>&lt;div class="AAAA overflow-hidden" style="height: 20px;" &gt;
 &lt;div class="BBBB" &gt;
 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.
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

and the js

<pre><code> if ($('.AAAA').height() &lt; $('.BBBB').height()) {
 console.log('we have overflow')
 } else {
 console.log('NO overflow')
 }
</code></pre>

This looks easier...

I have a div with a fixed height and <code>overflow:hidden;</code>

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?

Check with jquery if div has overflowing elements

jQuery

我有一个具有固定高度和overflow:hidden;的div我想检查一下jQuery是否有溢出超过固定高度的元素。我该怎么做呢？

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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