CSS:
.blue
{
width:200px;
height:200px;
background-color:blue;
color:#000000;
overflow:auto;
}
JavaScript的:
function addChar() {
$('.blue').append('some text ');
}
HTML:
<div id='blue1' class="blue"></div><br />
<a href='javascript:void(0)' onclick='addChar()'>Add</a>
div id='blue1'
将overflow
属性设置为auto
。我想在发生溢出时检测到溢出。
答案 0 :(得分:43)
$.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;
}
///这是我的解决方案
答案 1 :(得分:20)
$.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;
};
示例:
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');
}
答案 2 :(得分:16)
针对特定问题的单线解决方案:
var elt, hasOverflow = (elt = $('#blue1')).innerWidth() > elt[0].scrollWidth;
只是想打高尔夫球。 :
(注意:这仅适用于水平溢出检测;添加垂直溢出检测也很简单。)
答案 3 :(得分:4)
据我所知,您必须比较width/clientWidth
函数中的height/clientHeight
和addChar()
。当改变时你有滚动条(除非你在其他地方修改尺寸......)
这样的事情:
function addChar () {
var blueEl = $( '.blue' );
blueEl.append ( 'some text ' );
if ( blueEl.width () !== blueEl[0].clientWidth || blueEl.height () !== blueEl[0].clientHeight ) {
// element just got scrollbars
}
}
答案 4 :(得分:2)
我能想到的唯一方法是创建一个嵌套的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');
}
}
答案 5 :(得分:2)
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();
这里我只是在阻止高度,但我认为这种方法也可用于宽度。
答案 6 :(得分:1)
您可以针对其scrollWidth
和/或scrollHeight
检查元素的clientWidth
和/或clientHeight
属性。
请注意,这实际上并不需要jQuery。
答案 7 :(得分:1)
我使用了Luka的答案,直到我意识到它是单独比较每个孩子。它没有工作,因为它没有计算DOM节点内容的维度,只是每个孩子单独计算。我改为使用DOM节点的scrollHeight
属性:
(function($) {
$.fn.hasOverflow = function() {
var $this = $(this);
return $this[0].scrollHeight > $this.outerHeight() ||
$this[0].scrollWidth > $this.outerWidth();
};
})(jQuery);
编辑:修正因使用.height()
而导致填充错误而导致的错误。
答案 8 :(得分:1)
这是我写的一个插件,如果你想知道一个元素是否溢出,它可能会派上用场:https://github.com/ZetaSoftware/jquery-overflown-plugin。
使用此插件,在原始示例中,您可以执行:$("#blue1").overflown()
以查找#blue1的子项溢出。
答案 9 :(得分:-1)
我想我应该根据Praveen的答案添加一个改进的解决方案。
这种改进允许检查宽度,高度或两者。因此名称$.hasOverflow
也非常感谢Luka。三元运算符使它更具表现力和清晰度。
/**
* @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;
}