使用jquery检测元素溢出
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 。 发生溢出时，我想检测。
$.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; }
///这是我的解决scheme
$.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'); }
针对具体问题的单线解决scheme：
var elt, hasOverflow = (elt = $('#blue1')).innerWidth() > elt[0].scrollWidth;
只是想打高尔夫球。 ：]
（注意：这只适用于水平溢出检测;join垂直溢出检测也是微不足道的。）
据我所知，你将不得不比较你的addChar()函数中的width/clientWidth和height/clientHeight 。 当这个变化你有滚动条（除非你在其他地方修改尺寸…）
像这样的东西：
function addChar () { var blueEl = $( '.blue' ); blueEl.append ( 'some text ' ); if ( blueEl.width () !== blueEl[0].clientWidth || blueEl.height () !== blueEl[0].clientHeight ) { // element just got scrollbars } }
我能想到的唯一方法是创build一个嵌套的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'); } }
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();
这里我只是防止高度，但我认为这个方法也可以用于宽度。
你可以根据它的clientWidth和/或clientHeight检查元素的scrollWidth和/或scrollHeight属性。
请注意，这实际上并不需要jQuery。
我用卢卡的答案，直到我意识到它是单独比较每个孩子。 它没有工作，因为它不计算DOM节点的内容的维度，只是每个孩子个别。 我使用了DOM节点的scrollHeight属性：
(function($) { $.fn.hasOverflow = function() { var $this = $(this); return $this[0].scrollHeight > $this.outerHeight() || $this[0].scrollWidth > $this.outerWidth(); }; })(jQuery);
编辑：修正了使用.height()不考虑填充造成的错误。
function addChar() { $('.blue').append('some text '); if ($('.blue').innerWidth() != 200) { alert("it happened"); } }
仅供参考，您应该使用＃blue1而不是.blue来加快执行速度（除非您有多个.blue类的元素，您当然会追加）
以为我应该根据Praveen的回答添加一个改进的解决scheme。 这种改进允许检查宽度，高度或两者。 因此， $.hasOverflow这个名字$.hasOverflow感谢Luka。 三元运算符使其更具performance力和清晰度。
/** * @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; }
