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

Check whether HTML element has scrollbars

提问by Robert Koritnik

What's the fastest way of checking whether an element has scroll bars?

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

One thing of course is checking whether element is larger than its viewport, which can easily be done by checking these two values:

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

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

but that doesn't mean that it has scrollbars as well (so it can actually be scrolled by humans).

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

Question

题

How do I check for scrollbars in a 1cross browser and 2javascript only (as in no jQuery) way?

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

Javascript only, because I need as small overhead as possible, because I'd like to write a very fast jQuery selector filter

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

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

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

I suppose I'd have to check for overflowstyle settings but how do I do that in a cross browser way?

我想我必须检查overflow样式设置，但我如何以跨浏览器的方式做到这一点？

Additional edit

附加编辑

Not only overflowstyle settings. Checking whether an element has a scrollbar isn't as trivial as it seems. The first formula I've written above works fine when element doesn't have a border, but when it does (especially when border is of considerable width), offsetdimension can be larger than scrolldimension but the element can still be scrollable. We actually have to subtract borders from offsetdimension to get the actual scrollable viewport of the element and compare that to scrolldimension.

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

For future reference

备查

:scrollablejQuery selector filter is included in my .scrollintoview()jQuery plugin. Complete code can be found in my blog postif anybody needs it. Even though it didn't provide the actual solution Soumya's code considerably helped me solve the problem. It pointed me in the right direction.

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

回答by jzhinga

I found this somewhere a couple of weeks ago. It worked for me.

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

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

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

/* you'll get true/false */

回答by Gary

Try:

尝试：

For vertical scroll bar

对于垂直滚动条

el.scrollHeight > el.clientHeight

el.scrollHeight > el.clientHeight

For horizontal scrollbar

对于水平滚动条

el.scrollWidth > el.clientWidth

el.scrollWidth > el.clientWidth

I know this works for IE8 and Firefox 3.6+ at least.

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

回答by user113716

This may seem (or be)a little hackish, but you could test the scrollTopand scrollLeftproperties.

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

If they're greater than 0, you know there are scrollbars. If they're 0, then set them to 1, and test them again to see if you get a result of 1. Then set them back to 0.

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

Example:http://jsfiddle.net/MxpR6/1/

示例：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'));

I believe there's a different property for IE, so I'll update in a minute with that.

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

EDIT:Appears as though IE may support this property. (I can't test IE right now.)

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

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

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

回答by lotif

Here is yet another solution:

这是另一个解决方案：

As a few people pointed out, simply comparing offsetHeight and scrollHeight is not enough since they differ on elements with overflow hidden, etc., that still don't have scrollbars. So here I'm also checking if overflow is scroll or auto on the computed styles for the element:

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

回答by lotif

I maybe a little late to the party, but...

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

I believe you can detect for scrollbars with e.offsetWidth vs. e.clientWidth. Offset width includes borders and scrollbars, padding and width. Client width includes padding and width. Please see:

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

https://developer.mozilla.org/en/DOM/element.offsetWidth(second image) https://developer.mozilla.org/en/DOM/element.clientWidth(second image)

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

You need to check:

您需要检查：

1. Whether or not the element has overflow set to auto/scroll (including overflowX/Y) using the computed/cascaded/current style.
2. If the element does have overflow set to auto/scroll. Establish the offsetWidth and clientWidth.
3. If the clientWidth is less than the offsetWidth - right border (found again through the computed/cascaded/current style), then you know you have a scrollbar.

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

Do the same for the vertical (offset/clientHeight).

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

IE7 reports a clientHeight of 0 for some elements (I haven't checked why), therefore you always need the first overflow check.

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

Hope this helps!

希望这可以帮助！

回答by hakobpogh

There are several problems in case of checking the existence of scrollbars one of which is that in mac you don't have any visible scrollbar so both all the solutions above wouldn't give you an accurate answer.

在检查滚动条是否存在的情况下有几个问题，其中之一是在 mac 中你没有任何可见的滚动条，所以上面的所有解决方案都不会给你一个准确的答案。

So because the browser's rendering isn't very frequent you can check the having scroll with changing scroll and then setting it back:

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

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

回答by danday74

For IE11(Internet Explorer 11) I had to change the logic to:

对于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;

This is because IE reports scrollHeight as 1 larger than clientHeight when no scrollbar is present but approx 9 larger when a scrollbar is present

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

回答by Michael

Just messing around here as none of the above solutions worked out for me (so far). I have found some success with comparing a Div's scrollheight against its offsetHeight

只是在这里乱七八糟，因为上述解决方案都没有对我有用（到目前为止）。我发现将 Div 的滚动高度与其 offsetHeight 进行比较取得了一些成功

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

It seems to give me an acurate comparison...so far. Does someone know if this is legitimate?

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

回答by Sebastian Hernandez

If you need to know if theres a scrollbar present for the whole webpageand with full browser supportyou can use this:

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

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

It's important to use window.innerHeightinstead of document.body.clientHeightbecause in some mobile browsers clientHeightwill not get the size of the address bar but scrollHeightwill, so you get wrong calculations.

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

回答by hamid

none of this answers are correct. you have to use this :

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

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

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