detect elements overflow using jquery

2019-01-02 15:47发布

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' has overflow property set to auto. I want to detect overflow when it happens.

标签: jquery
10条回答
余生无你
2楼-- · 2019-01-02 16:01
$.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;
}

/// this is my solution

查看更多
不流泪的眼
3楼-- · 2019-01-02 16:01

Here's a plugin i wrote, which might come in handy if you want to find out if an element is overflown or not: https://github.com/ZetaSoftware/jquery-overflown-plugin.

With this plugin, in the original example, you could just do: $("#blue1").overflown() to find out of children of #blue1 are overflowing.

查看更多
姐姐魅力值爆表
4楼-- · 2019-01-02 16:03

As far as I know you will have to compare the width/clientWidth and height/clientHeight in your addChar() function. When that changes you've got scrollbars (unless you moddify the dimensions somewhere else ...)

Something like this:

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

    if ( blueEl.width () !== blueEl[0].clientWidth || blueEl.height () !== blueEl[0].clientHeight ) {
        // element just got scrollbars
    }
}
查看更多
步步皆殇っ
5楼-- · 2019-01-02 16:05

One-liner solution to the specific question:

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

Just wanted to golf a bit. :]

(Note: This is only for horizontal overflow detection; it's trivial to add vertical overflow detection as well.)

查看更多
公子世无双
6楼-- · 2019-01-02 16:12
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();

here i'm just preventing the height, but i think this method can be used to width too.

查看更多
素衣白纱
7楼-- · 2019-01-02 16:13
$.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;
};

Example:

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');
}
查看更多
登录 后发表回答