检查HTML元素是否有滚动条

Question

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

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

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 维度进行比较。

供将来参考

:scrollable jQuery 选择器过滤器包含在我的 .scrollintoview() jQuery 插件中。完整的代码可以在我的博客文章 如果有人需要的话。尽管它没有提供实际的解决方案，Soumya 的代码在很大程度上帮助我解决了问题。它为我指明了正确的方向。

Answer 1

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

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

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

/* you'll get true/false */

Answer 2

这可能看起来（或者是）有点 hackish，但您可以测试 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

Answer 3

尝试：

对于垂直滚动条

el.scrollHeight > el.clientHeight

用于水平滚动条

el.scrollWidth > el.clientWidth

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

Answer 4

这是另一个解决方案：

正如一些人指出的那样，简单地比较 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,
  };
}

Answer 5

我可能有点晚了，但是...

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

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

您需要检查：

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

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

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

希望这有帮助！

Answer 6

在检查滚动条是否存在时会遇到几个问题，其中之一是在 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;
};

Answer 7

如果您需要知道整个网页是否存在滚动条并且完整的浏览器支持，您可以使用以下内容：

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

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

Answer 8

此函数接受一个元素和一个方向（vertical、horizo​​ntal 或 both）作为参数并返回 true如果元素在指定方向上有滚动条，否则为 false。

function hasScrollbar(el, direction = 'both') {
  const style = window.getComputedStyle(el);
  if (direction === 'vertical' || direction === 'both') {
    if (el.clientHeight < el.scrollHeight || style.overflowY === 'scroll' || style.overflowY === 'auto') {
      return true;
    }
  }

  if (direction === 'horizontal' || direction === 'both') {
    if (el.clientWidth < el.scrollWidth || style.overflowX === 'scroll' || style.overflowX === 'auto') {
      return true;
    }
  }

  return false;
}

在此页面上测试：

hasScrollbar(document.querySelector('.lang-js.s-code-block'), 'vertical')

Answer 9

对于 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，但当存在滚动条时，报告的滚动高度大约比 clientHeight 大 9

Answer 10

对于水平滚动条来说，最有可能的是基于高度的计算，类似于

element.offsetHeight - element.clientHeight？

简而言之，对于水平滚动条，根据高度计算检查滚动条，对于垂直滚动条，反之亦然。

Answer 11

只是在这里乱搞，因为上述解决方案都不适合我（到目前为止）。
我在比较 Div 的滚动高度与其 offsetHeight 方面取得了一些成功，

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

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

Answer 12

这些答案都不正确。你必须使用这个：

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

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