检查HTML元素是否有滚动条
检查元素是否有滚动条的最快方法是什么？
有一件事情当然是检查元素是否大于其视口，这可以通过检查这两个值来轻松完成：
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth 但这并不意味着它也具有滚动条（所以它实际上可以被人类滚动）。
题
如何检查在一个跨浏览器和2个 JavaScript的滚动条（如在没有jQuery ）的方式？
只有Javascript，因为我需要尽可能小的开销，因为我想写一个非常快速的jQueryselect器筛选器
// check for specific scrollbars $(":scrollable(x/y/both)") // check for ANY scrollbar $(":scrollable")
我想我将不得不检查overflow风格设置，但我如何以跨浏览器的方式做到这一点？
额外编辑
不仅overflow风格设置。 检查一个元素是否有滚动条并不像看起来那么微不足道。 上面写的第一个公式在元素没有边框的时候工作的很好，但是当它的确如此（特别是当边框宽度相当的时候）， offset尺寸可以大于scroll尺寸，但是元素仍然可以滚动。 实际上，我们必须从offset减去边界以获得元素的实际可滚动视口，并将其与scroll维度进行比较。
备查
:scrollable jQueryselect器filter包含在我的.scrollintoview() jQuery插件中。 如果有人需要，可以在我的博客文章中find完整的代码。 即使它没有提供实际的解决schemeSoumya的代码相当大地帮助我解决了这个问题。 它指出了我正确的方向。
在里面添加一个100％宽的元素。 然后设置溢出隐藏。 如果元素的计算样式（来自jQ）发生更改，则父级具有滚动条。
编辑：看来你想要一个像getComputedStyle的跨浏览器方法。 尝试：
function getCSS(_elem, _style) { var computedStyle; if (typeof _elem.currentStyle != 'undefined') computedStyle = _elem.currentStyle; else computedStyle = document.defaultView.getComputedStyle(_elem, null); return computedStyle[_style]; }
几个星期前，我发现这个地方。 它为我工作。
var div = document.getElementById('container_div_id'); var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth; var hasVerticalScrollbar = div.scrollHeight > div.clientHeight; /* you'll get true/false */
尝试：
对于垂直滚动条
el.scrollHeight> el.clientHeight
对于水平滚动条
el.scrollWidth> el.clientWidth
我知道这至less适用于IE8和Firefox 3.6+。
这可能看起来（或有点） ，但你可以testingscrollTop和scrollLeft属性。
如果它们大于0，则知道有滚动条。 如果它们为0，则将它们设置为1，然后再次testing它们，看看是否得到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可能支持这个属性。 （我现在无法testingIE。）
http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx
这是另一个解决scheme：
正如less数人指出的那样，仅仅比较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, }; }
我可能晚了一点，但是…
我相信你可以检测滚动条与e.offsetWidth与e.clientWidth。 偏移宽度包括边框和滚动条，填充和宽度。 客户端宽度包括填充和宽度。 请参见：
https://developer.mozilla.org/en/DOM/element.offsetWidth （第二张图片） https://developer.mozilla.org/zh/DOM/element.clientWidth （第二张图片）
你需要检查：
- 元素是否溢出设置为自动/滚动（包括溢出X / Y）使用计算/级联/当前样式。
- 如果元素确实有溢出设置为自动/滚动。 build立offsetWidth和clientWidth。
- 如果clientWidth小于offsetWidth – 右边界（通过计算/级联/当前样式再次find），那么你知道你有一个滚动条。
对垂直（offset / clientHeight）做同样的操作。
IE7为某些元素（我没有检查为什么）报告一个clientHeight为0，因此你总是需要第一次溢出检查。
希望这可以帮助！
只是在这里乱搞，因为没有任何上述解决scheme为我（到目前为止）。 我发现将Div的scrollheight与offsetHeight进行比较已经取得了一些成功
var oh = $('#wrapDiv').get(0).offsetHeight; var sh = $('#wrapDiv').get(0).scrollHeight;
这似乎给了我一个精确的比较…迄今。 有人知道这是否合法吗？
没有一个答案是正确的。 你必须使用这个：
var div = document.getElementById('container_div_id'); var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth); var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);
