检查HTML元素是否有滚动条
检查元素是否有滚动条的最快方法是什么？
当然，有一件事是检查元素是否大于其视区，这可以通过检查以下两个值轻松完成：
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth但这并不意味着它也有滚动条(所以它实际上可以被人类滚动)。
问题
如何在1跨浏览器和2 javascript (如无jQuery)中检查滚动条？
因为我需要尽可能小的开销，因为我想编写一个非常快的jQuery选择器过滤器
// check for specific scrollbars
$(":scrollable(x/y/both)")
// check for ANY scrollbar
$(":scrollable")我想我必须检查overflow样式设置，但我如何在跨浏览器的方式中做到这一点呢？
其他编辑
不仅是overflow样式设置。检查一个元素是否有滚动条并不像看起来那么简单。当元素没有边框时，我上面写的第一个公式可以很好地工作，但是当元素有边框时(特别是当边框相当宽的时候)，offset维度可以大于scroll维度，但是元素仍然可以滚动。我们实际上必须从offset维度中减去边框，才能得到元素的实际可滚动视口，并将其与scroll维度进行比较。
将来可以用来作参考
:scrollable jQuery选择器过滤器包含在我的.scrollintoview() jQuery插件中。如果有人需要，可以在我的blog post中找到完整的代码。即使它没有提供实际的解决方案，Soumya的代码也在很大程度上帮助我解决了这个问题。它为我指明了正确的方向。
回答 10
Stack Overflow用户
发布于 2011-02-18 14:18:42
几周前我在某个地方发现了这个。这对我很管用。
var div = document.getElementById('container_div_id');
var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;
/* you'll get true/false */Stack Overflow用户
发布于 2011-02-03 06:07:45
尝试：
对于垂直滚动条
el.scrollHeight > el.clientHeight
对于水平滚动条
el.scrollWidth > el.clientWidth
我知道这至少适用于IE8和火狐3.6+。
Stack Overflow用户
发布于 2016-04-28 04:38:43
这是另一个解决方案：
正如一些人指出的那样，简单地比较offsetHeight和scrollHeight是不够的，因为它们在仍然没有滚动条的溢出隐藏的元素等方面有所不同。所以这里我还要检查元素的计算样式上的overflow是scroll还是auto：
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,
};
}https://stackoverflow.com/questions/4880381
复制相似问题