detectar o estouro de elementos usando jquery

CSS:

.blue { width:200px; height:200px; background-color:blue; color:#000000; overflow:auto; } 

JavaScript:

 function addChar() { $('.blue').append('some text '); } 

HTML:

 

Add

div id='blue1' tem propriedade de overflow definida como auto . Eu quero detectar estouro quando isso acontece.

   
 $.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; } 

/// esta é a minha solução

 $.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; }; 

Exemplo:

 var $content = $('#content').children().wrapAll('
'); while($content.hasOverflow()){ var size = parseFloat($content.css('font-size'), 10); size -= 1; $content.css('font-size', size + 'px'); }

Solução de uma linha para a questão específica:

 var elt, hasOverflow = (elt = $('#blue1')).innerWidth() > elt[0].scrollWidth; 

Só queria golfar um pouco. :]

(Nota: Isso é apenas para detecção de estouro horizontal; é trivial adicionar também a detecção de estouro vertical).

Tanto quanto eu sei que você terá que comparar a width/clientWidth e height/clientHeight na sua function addChar() . Quando isso muda, você tem barras de rolagem (a menos que você modifique as dimensões em outro lugar …)

Algo assim:

 function addChar () { var blueEl = $( '.blue' ); blueEl.append ( 'some text ' ); if ( blueEl.width () !== blueEl[0].clientWidth || blueEl.height () !== blueEl[0].clientHeight ) { // element just got scrollbars } } 

A única maneira que posso pensar é criar um DIV nested e comparar a altura div externa com a div interna. Se você não quiser modificar a marcação existente, você pode anexá-la usando o jQuery da seguinte forma:

 var outer = $('.blue'), inner = $('
').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(); 

aqui eu estou apenas impedindo a altura, mas eu acho que esse método pode ser usado para largura também.

Você pode verificar as propriedades scrollWidth e / ou scrollHeight do elemento em relação a seu clientWidth e / ou clientHeight .

Observe que isso não requer realmente o jQuery.

Eu usei a resposta de Luka até perceber que estava comparando cada criança individualmente. Não funcionou, pois não calcula as dimensões do conteúdo de um nó DOM, apenas cada criança individualmente. Eu usei a propriedade scrollHeight dos nós DOM:

 (function($) { $.fn.hasOverflow = function() { var $this = $(this); return $this[0].scrollHeight > $this.outerHeight() || $this[0].scrollWidth > $this.outerWidth(); }; })(jQuery); 

EDIT: Corrigido um bug causado pelo uso de .height() que não leva o preenchimento em conta.

Aqui está um plugin que eu escrevi, que pode ser útil se você quiser descobrir se um elemento está sobrecarregado ou não: https://github.com/ZetaSoftware/jquery-overflown-plugin .

Com este plugin, no exemplo original, você poderia apenas fazer: $("#blue1").overflown() para descobrir que os filhos de # blue1 estão transbordando.

 function addChar() { $('.blue').append('some text '); if ($('.blue').innerWidth() != 200) { alert("it happened"); } } 

FYI você deve usar # blue1 não .blue para execução mais rápida (a menos que você tenha vários elementos da class .blue que você está anexando, é claro)

Pensei que deveria adicionar uma solução aprimorada com base na resposta de Praveen. Esta melhoria permite verificar a largura, altura ou ambos. Daí o nome $.hasOverflow então agradece Luka também. O operador ternário torna-o um pouco mais expressivo e claro.

 /** * @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; }