检查 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 的代码也极大地帮助我解决了问题。它为我指明了正确的方向。

原文由 Robert Koritnik 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 */

原文由 jzhinga 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试：

对于垂直滚动条

el.scrollHeight > el.clientHeight

对于水平滚动条

el.scrollWidth > el.clientWidth

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

原文由 Gary 发布，翻译遵循 CC BY-SA 2.5 许可协议