如何检查滚动条是否可见？

Question

如何检查滚动条是否可见？是否可以检查overflow:auto一个迪夫？例如：HTML<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class">    * content</div>jQuery$('.my_class').live('hover', function (event){     if (event.type == 'mouseenter')     {          if( ...  if scrollbar visible ? ... )          {             alert('true'):          }          else          {             alert('false'):          }     }});有时内容短(没有滚动条)，有时长(滚动条可见)。

Answer 1

一个小插件。

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }})(jQuery);

像这样用它，

$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..

在Firefox，Chrome，IE6，7，8上进行测试

但不能正常工作body标签选择器

演示

---

编辑

我发现当你有水平滚动条导致垂直滚动条出现时，这个函数不工作.

我找到了另一个解决办法.。使用clientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight;

Answer 2

也许是更简单的解决方案。

if ($(document).height() > $(window).height()) {
    // scrollbar}

Answer 3

您可以使用Element.scrollHeight和Element.clientHeight属性。

根据MDN：

这个元素，滚动体只读属性是对元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容。SCROLLLHL.8值等于元素所需的最小clientHight值，以便在不使用垂直滚动条的情况下适应视点中的所有内容。它包括元素填充，但不包括其边距。

以及：

这个元素、客户体重只读属性返回元素的内部高度(以像素为单位)，包括填充，但不返回水平滚动条高度、边框或边距。

客户端高度可以计算为CSS高度+CSS填充-水平滚动条的高度(如果有)。

因此，如果滚动高度大于客户端高度，元素将显示一个滚动条，因此您的问题的答案是：

function scrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;}