检查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维度进行比较.

备查

:scrollablejQuery选择器过滤器包含在我的.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

尝试:

对于垂直滚动条

el.scrollHeight> el.clientHeight

对于水平滚动条

el.scrollWidth> el.clientWidth

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

Answer 3

这可能看起来(或者)有点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 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(第二张图片) https://developer.mozilla.org/en/DOM/element.clientWidth(第二张图片)

你需要检查:

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

对垂直(offset/clientHeight)执行相同操作.

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;
};