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

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

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

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

样式设置，但如何以跨浏览器的方式进行检查

附加编辑 不仅

溢出

样式设置。检查元素是否有滚动条并不像看上去那么简单。当元素没有边框时，我上面写的第一个公式可以很好地工作，但当它有边框时（特别是当边框有相当大的宽度时），

offset

dimension可以大于

scroll

dimension，但元素仍然可以滚动。实际上，我们必须从

offset

维度中减去边框，以获得元素的实际可滚动视口，并将其与

scroll

维度进行比较

供日后参考

---

：可滚动的

jQuery选择器过滤器包含在我的

.scrollintoview（）

jQuery插件中。如果有人需要，可以在my中找到完整的代码。尽管它没有提供实际的解决方案，但Soumya的代码在很大程度上帮助我解决了这个问题。它为我指明了正确的方向。

在其中添加一个100%宽的元素。然后将溢出设置为隐藏。如果元素的计算样式（来自jQ）发生更改，则父元素会有一个滚动条

编辑：似乎您需要一个像getComputedStyle这样的跨浏览器方法。尝试：

尝试：

用于垂直滚动条

el.scrollHeight>el.clientHeight

用于水平滚动条

el.scrollWidth>el.clientWidth

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

这可能看起来（或是）有点黑客，但您可以测试

scrollTop

和

scrollLeft

属性

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

示例：

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

编辑：显示IE可能支持此属性。（我现在不能测试IE。）

---

几周前我在某处发现了这个。这对我有用

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

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

/* you'll get true/false */

---

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

我相信你能检测到带有e.offsetWidth和e.clientWidth的滚动条。偏移宽度包括边框和滚动条、填充和宽度。客户端宽度包括填充和宽度。请参阅：

（第二幅图） （第二幅图）

您需要检查：

元素是否使用计算/级联/当前样式将溢出设置为自动/滚动（包括溢出x/Y）

如果元素的溢出设置为自动/滚动。建立offsetWidth和clientWidth

如果clientWidth小于offsetWidth-right边框（通过计算/级联/当前样式再次找到），则您知道您有一个滚动条

对垂直方向（偏移/倾斜高度）执行相同的操作

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

---

希望这有帮助

只是在这里胡闹，因为上述解决方案（到目前为止）都不适合我。 我发现比较一个Div的卷轴高度和它的离地高度是成功的

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

---

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

这里还有另一个解决方案：

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

---

这些答案都不正确。您必须使用以下选项：

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

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

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

---

这是因为IE报告scrollHeight在没有滚动条的情况下比clientHeight大1，但在有滚动条的情况下比clientHeight大约9。在检查滚动条存在的情况下有几个问题，其中一个问题是在mac中没有任何可见的滚动条，因此上述两种解决方案都不会给您一个提示答案准确

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

const hasScrollBar=（元素）=>{
常量{scrollTop}=元素；
如果（滚动顶部>0）{
返回true；
}
元素.scrollTop+=10；
if（scrollTop==元素.scrollTop）{
返回false；
}
//撤消更改
element.scrollTop=scrollTop；
返回true；
};如果您需要知道整个网页是否有滚动条，并且在完全支持浏览器的情况下，您可以使用：

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

使用
window.innerHeight
而不是
document.body.clientHeight
是很重要的，因为在一些移动浏览器中，clientHeight不会得到地址栏的大小，但是scrollHeight会得到，所以你会得到错误的计算结果。
如果我已经使用jQuery，我宁愿只做
$（el）.css(“overflow/overflowX/overflowY”）
并查看是否将其设置为自动或滚动。但我希望避免使用jQuery。CSS样式不会告诉您元素是否有滚动条。只会告诉您它是否可以有滚动条。可能会找到交叉浏览
// 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;

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