使用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'有overflow属性设置为auto。我想在发生溢出时检测溢出。

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;

}

///这是我的解决方案

Answer 2

针对具体问题的单线解决方案：

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

只是想打高尔夫球。：]

（注意：这仅适用于水平溢出检测;添加垂直溢出检测也很简单。）