(scrollWidth/Height - clientWidth/Height)是滚动条存在的一个很好的指示器，但在很多情况下它会给你一个“假阳性”的答案。 如果你需要精确，我建议使用下面的函数。 而不是试图猜测元素是否可滚动—您可以滚动它…

function isScrollable( el ){ var y1 = el.scrollTop; el.scrollTop += 1; var y2 = el.scrollTop; el.scrollTop -= 1; var y3 = el.scrollTop; el.scrollTop = y1; var x1 = el.scrollLeft; el.scrollLeft += 1; var x2 = el.scrollLeft; el.scrollLeft -= 1; var x3 = el.scrollLeft; el.scrollLeft = x1; return { horizontallyScrollable: x1 !== x2 || x2 !== x3, verticallyScrollable: y1 !== y2 || y2 !== y3 } } function check( id ){ alert( JSON.stringify( isScrollable( document.getElementById( id )))); } #outer1, #outer2, #outer3 { background-color: pink; overflow: auto; float: left; } #inner { width: 150px; height: 150px; } button { margin: 2em 0 0 1em; } <div id="outer1" style="width: 100px; height: 100px;"> <div id="inner"> <button onclick="check('outer1')">check if<br>scrollable</button> </div> </div> <div id="outer2" style="width: 200px; height: 100px;"> <div id="inner"> <button onclick="check('outer2')">check if<br>scrollable</button> </div> </div> <div id="outer3" style="width: 100px; height: 180px;"> <div id="inner"> <button onclick="check('outer3')">check if<br>scrollable</button> </div> </div>

我应该修改一下雷盖尔的话

(function($) {
    $.fn.hasScrollBar = function() {
        return this[0] ? this[0].scrollHeight > this.innerHeight() : false;
    }
})(jQuery);

innerHeight计数控件的高度及其顶部和底部填充

这扩展了@Reigel的回答。它将返回水平或垂直滚动条的答案。

(function($) {
    $.fn.hasScrollBar = function() {
        var e = this.get(0);
        return {
            vertical: e.scrollHeight > e.clientHeight,
            horizontal: e.scrollWidth > e.clientWidth
        };
    }
})(jQuery);

例子:

element.hasScrollBar()             // Returns { vertical: true/false, horizontal: true/false }
element.hasScrollBar().vertical    // Returns true/false
element.hasScrollBar().horizontal  // Returns true/false

另一个简单的答案是:

export const isScrollbarPresent = (element?: HTMLElement) => {
const testedElement = element ?? document.body;
return testedElement.scrollHeight > testedElement.clientHeight; }

我检查元素的scrollHeight是否大于clientHeight。scrollHeight返回一个元素的绝对高度，包括所有不可见的元素。clientHeight返回屏幕上可见的高度。

上面的第一个解决方案只适用于IE 上述第二种解决方案仅适用于FF

这两个函数的组合在两种浏览器中都有效:

//Firefox Only!!
if ($(document).height() > $(window).height()) {
    // has scrollbar
    $("#mtc").addClass("AdjustOverflowWidth");
    alert('scrollbar present - Firefox');
} else {
    $("#mtc").removeClass("AdjustOverflowWidth");
}

//Internet Explorer Only!!
(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.innerHeight();
    }
})(jQuery);
if ($('#monitorWidth1').hasScrollBar()) {
    // has scrollbar
    $("#mtc").addClass("AdjustOverflowWidth");
    alert('scrollbar present - Internet Exploder');
} else {
    $("#mtc").removeClass("AdjustOverflowWidth");
}​

准备好文档 monitorWidth1:溢出设置为auto的div mtc: monitorWidth1中的容器div AdjustOverflowWidth:当滚动条激活时应用到#mtc div的css类 *使用警报测试跨浏览器，然后注释为最终的产品代码。

HTH

呃，这里每个人的答案都是不完整的，让我们停止使用jquery在SO答案已经请。如果你想了解jquery的信息，请查看jquery的文档。

下面是一个通用的纯javascript函数，用于测试元素是否具有完整的滚动条:

// dimension - Either 'y' or 'x'
// computedStyles - (Optional) Pass in the domNodes computed styles if you already have it (since I hear its somewhat expensive)
function hasScrollBars(domNode, dimension, computedStyles) {
    dimension = dimension.toUpperCase()
    if(dimension === 'Y') {
        var length = 'Height'
    } else {
        var length = 'Width'
    }

    var scrollLength = 'scroll'+length
    var clientLength = 'client'+length
    var overflowDimension = 'overflow'+dimension

    var hasVScroll = domNode[scrollLength] > domNode[clientLength]


    // Check the overflow and overflowY properties for "auto" and "visible" values
    var cStyle = computedStyles || getComputedStyle(domNode)
    return hasVScroll && (cStyle[overflowDimension] == "visible"
                         || cStyle[overflowDimension] == "auto"
                         )
          || cStyle[overflowDimension] == "scroll"
}