检查 HTML 元素是否有滚动条

javascript dom scrollbar overflow

2022-08-30 04:16:14

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

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

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

其他编辑

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

供将来参考

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

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

答案 2

尝试：

对于垂直滚动条

el.scrollHeight > el.clientHeight

对于水平滚动条

el.scrollWidth > el.clientWidth

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