出于封装原因，我扩展了Element。从微观回答。

/*
 * isOverflowing
 * 
 * Checks to see if the element has overflowing content
 * 
 * @returns {}
 */
Element.prototype.isOverflowing = function(){
    return this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth;
}

像这样使用它

let elementInQuestion = document.getElementById("id_selector");

    if(elementInQuestion.isOverflowing()){
        // do something
    }

您可以检查相对于偏移父函数的边界。

// Position of left edge relative to frame left courtesy
// http://www.quirksmode.org/js/findpos.html
function absleft(el) {
  var x = 0;
  for (; el; el = el.offsetParent) {
    x += el.offsetLeft;
  }
  return x;
}

// Position of top edge relative to top of frame.
function abstop(el) {
  var y = 0;
  for (; el; el = el.offsetParent) {
    y += el.offsetTop;
  }
  return y;
}

// True iff el's bounding rectangle includes a non-zero area
// the container's bounding rectangle.
function overflows(el, opt_container) {
  var cont = opt_container || el.offsetParent;
  var left = absleft(el), right = left + el.offsetWidth,
      top = abstop(el), bottom = top + el.offsetHeight;
  var cleft = absleft(cont), cright = cleft + cont.offsetWidth,
      ctop = abstop(cont), cbottom = ctop + cont.offsetHeight;
  return left < cleft || top < ctop
      || right > cright || bottom > cbottom;
}

如果你传递给它一个元素，它会告诉你它的边界是否完全在容器中，如果没有显式提供容器，它将默认为元素的offset父元素。

jquery的替代答案是使用[0]键来访问原始元素，如:

if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){

下面是一个使用带有overflow:hidden和JQuery height()的包装器div来确定元素是否已溢出的方法，以测量包装器和内部内容div之间的差异。

outers.each(function () {
    var inner_h = $(this).find('.inner').height();
    console.log(inner_h);
    var outer_h = $(this).height();
    console.log(outer_h);
    var overflowed = (inner_h > outer_h) ? true : false;
    console.log("overflowed = ", overflowed);
});

来源:jsfiddle.net上的框架和扩展

出于封装原因，我扩展了Element。从微观回答。

/*
 * isOverflowing
 * 
 * Checks to see if the element has overflowing content
 * 
 * @returns {}
 */
Element.prototype.isOverflowing = function(){
    return this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth;
}

像这样使用它

let elementInQuestion = document.getElementById("id_selector");

    if(elementInQuestion.isOverflowing()){
        // do something
    }

元素可以垂直、水平或同时进行溢出。如果DOM元素被覆盖，这个函数将返回一个布尔值:

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

function isOverflown(element) { return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } var els = document.getElementsByClassName('demos'); for (var i = 0; i < els.length; i++) { var el = els[i]; el.style.borderColor = (isOverflown(el) ? 'red' : 'green'); console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown."); } .demos { white-space: nowrap; overflow: hidden; width: 120px; border: 3px solid black; } <div class='demos'>This is some text inside the div which we are testing</div> <div class='demos'>This is text.</div>

ES6例子:

const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
    return scrollHeight > clientHeight || scrollWidth > clientWidth;
}