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

javascript dom css scrollbar

2022-08-29 23:55:56

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

例如：

断续器

<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * content
</div>

杰奎里

$('.my_class').live('hover', function (event)
{
    if (event.type == 'mouseenter')
    {
         if( ...  if scrollbar visible ? ... )
         {
            alert('true'):
         }
         else
         {
            alert('false'):
         }
    }

});

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

答案 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..

测试工作在火狐，Chrome，IE6，7，8上

但在标签选择器上无法正常工作body

演示

编辑

我发现，当您的水平滚动条导致垂直滚动条出现时，此功能不起作用....

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

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

答案 2

您可以使用 Element.scrollHeight 和 Element.clientHeight 属性的组合来执行此操作。

根据MDN的说法：

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

和：

Element.clientHeight 只读属性返回元素的内部高度（以像素为单位），包括填充，但不包括水平滚动条高度、边框或边距。

clientHeight可以计算为CSS高度+ CSS填充 - 水平滚动条的高度（如果存在）。

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

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