使用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() {&nbsp; &nbsp; //note: clientHeight= height of holder&nbsp; &nbsp; //scrollHeight= we have content till this height&nbsp; &nbsp; var _elm = $(this)[0];&nbsp; &nbsp; var _hasScrollBar = false;&nbsp;&nbsp; &nbsp; if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {&nbsp; &nbsp; &nbsp; &nbsp; _hasScrollBar = true;&nbsp; &nbsp; }&nbsp; &nbsp; return _hasScrollBar;}///这是我的解决方案

Answer 2

针对具体问题的单线解决方案：var elt, hasOverflow = (elt = $('#blue1')).innerWidth() > elt[0].scrollWidth;只是想打高尔夫球。：]（注意：这仅适用于水平溢出检测;添加垂直溢出检测也很简单。）