détecter les dépassements d'éléments à l'aide de 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' a overflow propriété définie sur auto . Je veux détecter un débordement quand cela se produit.

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

/// c'est ma solution

Answer 2

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

Exemple:

 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 3

Solution unique à la question spécifique:

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

Je voulais juste jouer un peu au golf. :]

(Remarque: il ne s'agit que de la détection de débordement horizontal. Il est également facile d'ajouter une détection de débordement vertical.)

Answer 4

Autant que je sache, vous devrez comparer les width/clientWidth et height/clientHeight de votre fonction addChar() . Lorsque cela change, vous avez des barres de défilement (sauf si vous modifiez les dimensions ailleurs ...)

Quelque chose comme ça:

 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 5

Le seul moyen auquel je puisse penser est de créer une DIV imbriquée et de comparer la hauteur de la div externe avec la div interne. Si vous ne voulez pas modifier le balisage existant, vous pouvez l'ajouter en utilisant jQuery comme ceci:

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

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