检查HTML元素是否具有滚动条

检查元素是否具有滚动条的最快方法是什么？

当然，一件事是检查element是否大于其视口，这可以通过检查以下两个值来轻松完成：

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

但这并不意味着它也具有滚动条（因此它实际上可以被人类滚动）。

题

如何在1个跨浏览器和2个 javascript中检查滚动条（如无jQuery）？

仅使用Javascript，因为我需要尽可能小的开销，因为我想编写一个非常快速的jQuery选择器过滤器

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

我想我必须检查overflow样式设置，但是如何以跨浏览器的方式进行呢？

附加编辑

不仅是overflow样式设置。检查元素是否具有滚动条并不是看起来那么简单。我上面写的第一个公式在元素没有边框的时候很好用，但是当元素没有边框时（特别是当边框的宽度很大时），offset尺寸可以大于scroll尺寸，但是元素仍然可以滚动。实际上，我们必须从offset尺寸中减去边框以获得元素的实际可滚动视口，并将其与scroll尺寸进行比较。

备查

:scrollablejQuery选择器过滤器包含在我的.scrollintoview()jQuery插件中。如果有人需要，可以在我的博客文章中找到完整的代码。即使没有提供实际的解决方案，Soumya的代码也极大地帮助我解决了问题。它为我指明了正确的方向。

几周前我在某个地方发现了这个。它为我工作。

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/zh-CN/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. 元素是否使用计算/级联/当前样式将溢出设置为自动/滚动（包括overflowX / Y）。
2. 如果元素确实具有设置为自动/滚动的溢出。建立offsetWidth和clientWidth。
3. 如果clientWidth小于offsetWidth-右边界（通过计算/级联/当前样式再次找到），则说明您具有滚动条。

对垂直方向（偏移量/ clientHeight）执行相同的操作。

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

希望这可以帮助！

检查滚动条是否存在几个问题，其中之一是在Mac中您没有任何可见的滚动条，因此上述所有解决方案都无法为您提供准确的答案。

因此，由于浏览器的渲染不是很频繁，因此您可以通过更改滚动来检查是否具有滚动，然后将其重新设置为：

const hasScrollBar = (element) => {
  const {scrollTop} = element;

  if(scrollTop > 0) {
    return true;
  }

  element.scrollTop += 10;

  if(scrollTop === element.scrollTop) {
    return false;
  }

  // undoing the change
  element.scrollTop = scrollTop;
  return true;
};

只是在这里弄乱，因为上述解决方案都没有为我解决（到目前为止）。通过将Div的scrollheight与offsetHeight进行比较，我发现了一些成功

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

到目前为止，这似乎给了我一个准确的比较。有人知道这是否合法吗？

对于IE11（Internet Explorer 11），我必须将逻辑更改为：

// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;

这是因为，当不存在滚动条时，IE报告的scrollHeight比clientHeight大1，但是当存在滚动条时，其约大9倍于clientHeight。

如果您需要了解整个网页上是否存在滚动条并且具有完整的浏览器支持，则可以使用以下命令：

const hasScrollbar = document.body.scrollHeight > window.innerHeight

使用window.innerHeight而不是使用非常重要，document.body.clientHeight因为在某些移动浏览器中，clientHeight不会获得地址栏的大小，而scrollHeight会得到，因此您将得到错误的计算。

这些答案均不正确。您必须使用此：

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

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

在其中添加100％宽的元素。然后将溢出设置为隐藏。如果元素的计算样式（来自jQ）发生更改，则父元素具有滚动条。

编辑：似乎您想要一个跨浏览器方法，如getComputedStyle。尝试：

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}