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' ha overflow conjunto de propiedades a auto. Quiero detectar el desbordamiento cuando sucede.

  • Se que la detección de la presencia de la barra de desplazamiento o de desbordamiento en general?

10 Comentarios

  1. 42
    $.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

    • he encontrado una solución después de la publicación de esta pregunta aquí!!
    • One-liner solución: stackoverflow.com/a/18640713/357774
    • O simplemente return (_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)
  2. 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;
    };

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

    One-liner solución a la pregunta específica:

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

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

    (Nota: Esto es sólo horizontal para la detección de desbordamiento; es trivial para agregar vertical de la detección de desbordamiento así.)

  4. 4

    Como yo sé que usted tendrá que comparar el width/clientWidth y height/clientHeight en su addChar() función. Cuando que los cambios tienes barras de desplazamiento (a menos que usted 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
        }
    }
    • Esto va a funcionar. También puede comprobar .scrollWidth y .scrollHeight en contra de la altura original() y width() para lograr la misma cosa. No estoy seguro de que es el x-navegador compatible.
    • hay un error en el código de ur hacer como el de abajo, blueEl.width () !== blueEl[0].scrollWidth || blueEl.altura () !== blueEl[0].scrollHeight ==comparar scrollHeight/scrollWidth no cliente de anchura/altura
    • Mi código funciona para mí. ¿Qué navegador estás usando?
    • En FF3.5 esto sólo funcionaba cuando yo scrollWidth
    • Esta en el plugin formato: $.fn.overflows = function() { return ($(this).width() !== this.clientWidth || $(this).height() !== this.clientHeight); };
  5. 2

    La única manera que se me ocurre es crear un DIV anidados y comparar el exterior div altura con el interior de la div. Si usted no desea modificar los existentes de marcado puede anexar utilizando jQuery como este:

    var outer = $('.blue'),
        inner = $('<div>').appendTo(outer);
    
    function addChar() {
        inner.append('some text ');
        if (inner.height() > outer.height()) {
            console.log('overflowed');
        }
    }
  6. 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();

    aquí estoy sólo la prevención de la altura, pero creo que este método puede ser utilizado para el ancho también.

  7. 1

    He utilizado Luka la respuesta hasta que me di cuenta que era la comparación de cada niño de manera individual. No funciona ya que no calcula las dimensiones del contenido de un nodo DOM, sólo individualmente a cada niño. He utilizado el scrollHeight propiedad de nodos DOM lugar:

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

    EDICIÓN: Corregido un error causado por el uso de .height() que no lleva relleno en cuenta.

  8. -1

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

Dejar respuesta

Please enter your comment!
Please enter your name here