rilevare elementi traboccano utilizzando 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' ha overflow proprietà impostata a auto. Voglio rilevare l'overflow quando succede.

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

/// questa è la mia soluzione

Answer 2

L'unico modo che posso pensare è di creare un DIV annidato e confrontare l'altezza div esterna con il div interno. Se non si desidera modificare markup esistente è possibile aggiungere utilizzando jQuery come questo:

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

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

Answer 3

Per quanto ne so si dovrà confrontare la width/clientWidth e height/clientHeight nella funzione addChar(). Quando questo cambia hai barre di scorrimento (a meno che non moddify le dimensioni da qualche altra parte ...)

Qualcosa di simile a questo:

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 si dovrebbe usare # Blue1 non .blue per l'esecuzione più veloce (a meno che non si dispone di più elementi della classe .blue si sta aggiungendo ovviamente)

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

Esempio:

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

È possibile controllare dell'elemento scrollWidth e/o scrollHeight proprietà contro il suo clientWidth e/o clientHeight.

Si noti che questo non richiede effettivamente 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(); 

qui sto solo prevenendo l'altezza, ma penso che questo metodo possa essere usato anche per la larghezza.

Answer 8

soluzione One-liner alla domanda specifica:

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

Volevo solo un po 'di golf. :]

(Nota:. Questo è solo per il rilevamento di overflow orizzontale; è banale per aggiungere il rilevamento di overflow verticale così)

Answer 9

ho usato la risposta di Luka fino a quando ho capito che era confrontando ogni bambino singolarmente. Non ha funzionato poiché non calcola le dimensioni del contenuto di un nodo DOM, solo ogni bambino individualmente.Ho usato la proprietà di DOM scrollHeight nodi invece:

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

EDIT: Corretto un bug causati dall'utilizzo di .height() che non tiene imbottitura in considerazione.

Answer 10

pensato che dovrei aggiungere una soluzione migliore in base alla risposta di Praveen. Questo miglioramento consente di controllare la larghezza, l'altezza o entrambi. Da qui il nome $.hasOverflow quindi grazie anche a Luka. L'operatore ternario lo rende un po 'più espressivo e chiaro.

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

Ecco un plugin che ho scritto, che potrebbe tornare utile se si vuole sapere se un elemento è sorvolata o no: https://github.com/ZetaSoftware/jquery-overflown-plugin.

Con questo plug-in, nell'esempio originale, è sufficiente fare: $("#blue1").overflown() per scoprire che i bambini di # blue1 sono straripanti.