如何检查滚动条是否可见？ [英] How can I check if a scrollbar is visible?

问题描述

是否可以检查div的 overflow：auto ？

例如：

HTML

 < div id =my_divstyle =width：100px; height：100px; overflow：auto;类= my_class > 
 * content 
< / div> 
  

JQUERY

  $（'。my_class'）。live（'hover'，function（event）
 {
 if（event.type =='mouseenter'）
 {
 if（...如果滚动条可见？...）
 {
 alert（'true'）：
} 
 else 
 {
 alert（'false'）：
} 
} 
 
}）; 
  

有时内容很短（没有滚动条），有时长（滚动条可见）。

解决方案

一个小插件。

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

像这样使用它，

  $（ '＃my_div1'）hasScrollBar（）; //如果有一个`vertical`滚动条则返回true，否则返回false .. 
  

在Firefox上测试， Chrome，IE6,7,8

但在正文标记选择器上无法正常工作

演示

---

编辑

我发现当你有水平滚动条导致垂直滚动条出现时，这个功能不起作用.... / p>

我发现了另一种解决方案......使用 clientHeight

 返回this.get（0）.scrollHeight> this.get（0）.clientHeight; 
  

Is it possible to check the overflow:auto of a div?

For example:

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'):
         }
    }

});

Sometimes is the content short (no scrollbar) and sometimes long (scrollbar visible).

解决方案

a little plugin for it.

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

use it like this,

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

tested working on Firefox, Chrome, IE6,7,8

but not working properly on body tag selector

demo

---

Edit

I found out that when you have horizontal scrollbar that causes vertical scrollbar to appear, this function does not work....

I found out another solution... use clientHeight

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

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