detectar elementos desbordan usando jQuery

Question

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' tiene overflow propiedad establecida en auto. Quiero detectar desbordamiento cuando sucede.

Answer 1

$.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 es mi solución

Answer 2

La única forma en que puedo pensar es en crear una DIV anidada y comparar la altura div externa con la div interna. Si no desea modificar el marcado existente puede añadir que el uso de jQuery como esto:

var outer = $('.blue'), 
    inner = $('<div>').appendTo(outer); 

function addChar() { 
    inner.append('some text '); 
    if (inner.height() > outer.height()) { 
     console.log('overflowed'); 
    } 
} 

Answer 3

Por lo que sabe que tendrá que comparar la width/clientWidth y height/clientHeight en su función addChar(). Cuando que los cambios que tiene barras de desplazamiento (a menos que moddify las dimensiones en otro lugar ...)

Algo como esto:

function addChar() { 
    var blueEl = $('.blue'); 
    blueEl.append ('some text '); 

    if (blueEl.width() !== blueEl[0].clientWidth || blueEl.height() !== blueEl[0].clientHeight) { 
     // element just got scrollbars 
    } 
} 

Answer 4

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

FYI debería utilizar: # blue1 no .Blue para una ejecución más rápida (a menos que tenga múltiples elementos de la clase .Blue está anexando por supuesto)

Answer 5

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

Ejemplo:

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'); 
} 

Answer 6

Puede comprobar scrollWidth y/o scrollHeight las propiedades del elemento en contra de su clientWidth y/o clientHeight.

Tenga en cuenta que esto realmente no requiere jQuery.

Answer 7

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(); 

aquí solo estoy previniendo la altura, pero creo que este método también se puede usar para ancho.

Answer 8

solución de una sola línea a la cuestión específica:

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

Sólo quería un poco de golf. :]

. (Nota: Esto es sólo para detección de desbordamiento horizontal, es trivial para añadir detección de desbordamiento vertical, así)

Answer 9

que utilizan la respuesta de Luka hasta que me di cuenta de que estaba comparando cada niño individualmente. No funcionó ya que no calcula las dimensiones del contenido de un nodo DOM, solo cada niño individualmente.He utilizado la propiedad scrollHeight de DOM nodos lugar:

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

EDIT: ha corregido un error causado por el uso de .height() que no toma en cuenta el relleno.

Answer 10

Pensé que debería agregar una solución mejorada basada en la respuesta de Praveen. Esta mejora permite comprobar el ancho, la altura o ambos. De ahí el nombre $.hasOverflow así que gracias Luka también. El operador ternario lo hace un poco más expresivo y 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; 
} 

Answer 11

Aquí hay un plugin que he escrito, lo que podría ser útil si desea averiguar si un elemento está sobrevolado o no: https://github.com/ZetaSoftware/jquery-overflown-plugin.

Con este complemento, en el ejemplo original, podría hacer: $("#blue1").overflown() para descubrir que los hijos de # blue1 están desbordados.