jQuery 使用jquery检测元素溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2059743/
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
detect elements overflow using jquery
提问by Praveen Prasad
CSS:
CSS：
.blue
{
width:200px;
height:200px;
background-color:blue;
color:#000000;
overflow:auto;
}
JavaScript:
JavaScript：
function addChar() {
$('.blue').append('some text ');
}
HTML:
HTML：
<div id='blue1' class="blue"></div><br />
<a href='javascript:void(0)' onclick='addChar()'>Add</a>
div id='blue1'has overflowproperty set to auto. I want to detect overflow when it happens.
div id='blue1'将overflow属性设置为auto. 我想在它发生时检测溢出。
回答by Praveen Prasad
$.fn.HasScrollBar = function() {
//note: clientHeight= height of holder
//scrollHeight= we have content till this height
var _elm = $(this)[0];
var _hasScrollBar = false;
if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {
_hasScrollBar = true;
}
return _hasScrollBar;
}
/// this is my solution
/// 这是我的解决方案
回答by Luka Zakraj?ek
$.fn.hasOverflow = function() {
var $this = $(this);
var $children = $this.find('*');
var len = $children.length;
if (len) {
var maxWidth = 0;
var maxHeight = 0
$children.map(function(){
maxWidth = Math.max(maxWidth, $(this).outerWidth(true));
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
});
return maxWidth > $this.width() || maxHeight > $this.height();
}
return false;
};
Example:
例子：
var $content = $('#content').children().wrapAll('<div>');
while($content.hasOverflow()){
var size = parseFloat($content.css('font-size'), 10);
size -= 1;
$content.css('font-size', size + 'px');
}
回答by Noyo
One-liner solution to the specific question:
针对特定问题的单行解决方案：
var elt, hasOverflow = (elt = $('#blue1')).innerWidth() > elt[0].scrollWidth;
Just wanted to golf a bit. :]
只是想打高尔夫球。:]
(Note: This is only for horizontal overflow detection; it's trivial to add vertical overflow detection as well.)
（注意：这仅用于水平溢出检测；添加垂直溢出检测也很简单。）
回答by Jan Han?i?
As far as I know you will have to compare the width/clientWidthand height/clientHeightin your addChar()function. When that changes you've got scrollbars (unless you moddify the dimensions somewhere else ...)
据我所知，您必须在您的功能中比较width/clientWidth和。当这种变化时，你有滚动条（除非你在其他地方修改尺寸......）height/clientHeightaddChar()
Something like this:
像这样的东西：
function addChar () {
var blueEl = $( '.blue' );
blueEl.append ( 'some text ' );
if ( blueEl.width () !== blueEl[0].clientWidth || blueEl.height () !== blueEl[0].clientHeight ) {
// element just got scrollbars
}
}
回答by Darcy Zagonel
jQuery.fn.preventOverflow = function(){
return this.each(function(){
var defaultDisplay = $(this).css('display');
var defaultHeight = $(this).height();
$(this).css('display', 'table');
var newHeight = $(this).height();
$(this).css('display', defaultDisplay);
if(newHeight > defaultHeight){
$(this).height(newHeight);
}
});
};
$('.query').preventOverflow();
here i'm just preventing the height, but i think this method can be used to width too.
在这里我只是防止高度，但我认为这种方法也可以用于宽度。
回答by David Hellsing
The only way I can think of is to create a nested DIV and compare the outer div height with the inner div. If you don't want to modify existing markup you can append it using jQuery like this:
我能想到的唯一方法是创建一个嵌套的 DIV 并将外部 div 高度与内部 div 进行比较。如果您不想修改现有标记，可以像这样使用 jQuery 附加它：
var outer = $('.blue'),
inner = $('<div>').appendTo(outer);
function addChar() {
inner.append('some text ');
if (inner.height() > outer.height()) {
console.log('overflowed');
}
}
回答by William Cline
You can check the element's scrollWidthand/or scrollHeightproperties against its clientWidthand/or clientHeight.
您可以根据其和/或来检查元素的scrollWidth和/或scrollHeight属性。clientWidthclientHeight
Note that this doesn't actually require jQuery.
请注意，这实际上并不需要 jQuery。
回答by Aram Kocharyan
I used Luka's answer until I realised it was comparing each child individually. It didn't work since it doesn't calculate the dimensions of the content of a DOM node, just each child individually. I used the scrollHeightproperty of DOM nodes instead:
我使用了 Luka 的答案，直到我意识到这是在单独比较每个孩子。它不起作用，因为它不计算 DOM 节点内容的维度，只是单独计算每个子节点。我改用了scrollHeightDOM 节点的属性：
(function($) {
$.fn.hasOverflow = function() {
var $this = $(this);
return $this[0].scrollHeight > $this.outerHeight() ||
$this[0].scrollWidth > $this.outerWidth();
};
})(jQuery);
EDIT:Fixed a bug caused by using .height()which doesn't take padding into account.
编辑：修复了使用.height()不考虑填充导致的错误。
回答by z??s u????s
Here's a plugin i wrote, which might come in handy if you want to find out if an element is overflown or not: https://github.com/ZetaSoftware/jquery-overflown-plugin.
这是我写的一个插件，如果你想知道一个元素是否溢出，它可能会派上用场：https: //github.com/ZetaSoftware/jquery-overflown-plugin。
With this plugin, in the original example, you could just do: $("#blue1").overflown()to find out of children of #blue1 are overflowing.
使用此插件，在原始示例中，您可以执行以下操作：$("#blue1").overflown()找出 #blue1 的子节点溢出。
回答by Tim Vermaelen
Thought I should add an improved solution based on Praveen's answer.
This improvement allows to check for width, height or both. Hence the name $.hasOverflowso thanks Luka as well. The ternary operator makes it a little more expressive and clear.
认为我应该根据 Praveen 的回答添加一个改进的解决方案。此改进允许检查宽度、高度或两者。因此这个名字也$.hasOverflow感谢卢卡。三元运算符使其更具表现力和清晰性。
/**
* @param {Boolean} x overflow-x
* @param {Boolean} y overflow-y
*/
$.fn.hasOverflow = function (x, y) {
var el = $(this).get(0),
width = el.clientWidth < el.scrollWidth,
height = el.clientHeight < el.scrollHeight;
return !x
? !y
? width || height
: height
: width;
}
