几周前我在某个地方发现了这个。它对我有用。

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

尝试：

对于垂直滚动条

el.scrollHeight > el.clientHeight

对于水平滚动条

el.scrollWidth > el.clientWidth

我知道这至少适用于 IE8 和 Firefox 3.6+。

这可能看起来（或可能）有点骇人听闻，但您可以测试scrollTop和scrollLeft属性。

如果它们大于 0，您就知道有滚动条。如果它们是 0，则将它们设置为 1，并再次测试它们以查看结果是否为 1。然后将它们重新设置为 0。

示例： http : //jsfiddle.net/MxpR6/1/

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

我相信 IE 有一个不同的属性，所以我会在一分钟内更新。

编辑：似乎 IE 可能支持此属性。（我现在无法测试 IE。）

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

这是另一个解决方案：

正如一些人指出的那样，仅仅比较 offsetHeight 和 scrollHeight 是不够的，因为它们在隐藏溢出等的元素上有所不同，这些元素仍然没有滚动条。所以在这里我还要检查元素的计算样式上的溢出是滚动还是自动：

var isScrollable = function(node) {
  var overflowY = window.getComputedStyle(node)['overflow-y'];
  var overflowX = window.getComputedStyle(node)['overflow-x'];
  return {
    vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
    horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
  };
}

我参加聚会可能有点晚了，但是...

我相信您可以使用 e.offsetWidth 与 e.clientWidth 检测滚动条。偏移宽度包括边框和滚动条、填充和宽度。客户端宽度包括填充和宽度。请参见：

https://developer.mozilla.org/en/DOM/element.offsetWidth（第二张图片） https://developer.mozilla.org/en/DOM/element.clientWidth（第二张图片）

您需要检查：

1. 元素是否使用计算/级联/当前样式将溢出设置为自动/滚动（包括溢出X/Y）。
2. 如果元素确实将溢出设置为自动/滚动。建立 offsetWidth 和 clientWidth。
3. 如果 clientWidth 小于 offsetWidth - 右边框（通过计算/级联/当前样式再次找到），那么您知道您有一个滚动条。

对垂直（偏移/客户端高度）执行相同的操作。

IE7 报告某些元素的 clientHeight 为 0（我还没有检查原因），因此您总是需要进行第一次溢出检查。

希望这可以帮助！