检查HTML元素是否有滚动条 [英] Check whether HTML element has scrollbars

问题描述

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

  el.scrollHeight> el.offsetHeight || el.scrollWidth> el.offsetWidth 
  

但这并不意味着它也有滚动条（因此它实际上可以是

问题

如何检查 1 cross浏览器和 2 javascript（如 no jQuery ）方式

只有Javascript，因为我需要尽可能小的开销，因为我想编写一个非常快速的jQuery选择器过滤器

  //检查特定的滚动条
 $（：scrollable（x / y / both））
 
 //检查任何滚动条
 $（：scrollable）
  

我想我必须检查 overflow 样式设置，但如何我以跨浏览器方式执行此操作？

其他编辑

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

将来参考

可滚动 jQuery选择器过滤器包含在我的 .scrollintoview（） jQuery插件中。完整的代码可以在我的博客文章如果有人需要它即使它没有提供实际的解决方案Soumya的代码大大帮助我解决问题。它指向正确的方向。

解决方案

在其中添加一个100％宽的元素。然后将溢出设置为隐藏。如果元素的计算样式（从jQ）发生变化，则父对象有一个滚动条。

编辑：您似乎想要一种跨浏览器方法，如 getComputedStyle 。尝试：

 函数getCSS（_elem，_style）
 {
 var computedStyle; 
 if（typeof _elem.currentStyle！='undefined'）
 computedStyle = _elem.currentStyle; 
 else 
 computedStyle = document.defaultView.getComputedStyle（_elem，null）; 
 return computedStyle [_style]; 
} 
  

What's the fastest way of checking whether an element has scroll bars?

One thing of course is checking whether element is larger than its viewport, which can easily be done by checking these two values:

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

but that doesn't mean that it has scrollbars as well (so it can actually be scrolled by humans).

Question

How do I check for scrollbars in a 1 cross browser and 2 javascript only (as in no jQuery) way?

Javascript only, because I need as small overhead as possible, because I'd like to write a very fast jQuery selector filter

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

I suppose I'd have to check for overflow style settings but how do I do that in a cross browser way?

Additional edit

Not only overflow style settings. Checking whether an element has a scrollbar isn't as trivial as it seems. The first formula I've written above works fine when element doesn't have a border, but when it does (especially when border is of considerable width), offset dimension can be larger than scroll dimension but the element can still be scrollable. We actually have to subtract borders from offset dimension to get the actual scrollable viewport of the element and compare that to scroll dimension.

For future reference

:scrollable jQuery selector filter is included in my .scrollintoview() jQuery plugin. Complete code can be found in my blog post if anybody needs it. Even though it didn't provide the actual solution Soumya's code considerably helped me solve the problem. It pointed me in the right direction.

解决方案

Add an 100% wide element inside it. Then set overflow to hidden. If the element's computed style (from jQ) changes, the parent had a scrollbar.

EDIT: It seems you want a cross browser method like getComputedStyle. Try:

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}

这篇关于检查HTML元素是否有滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！