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

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标签选择器演示编辑我发现当你有水平滚动条导致垂直滚动条出现时，这个函数不工作.我找到了另一个解决办法.。使用clientHeightreturn 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;}