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

Question

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

327

能否检查一个div的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'):
         }
    }

});

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

- Peter

21个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Clews · Answer 1

无框架JavaScript方法，检查垂直和水平方向

 /*
 * hasScrollBars
 * 
 * Checks to see if an element has scrollbars
 * 
 * @returns {object}
 */
Element.prototype.hasScrollBars = function() {
    return {"vertical": this.scrollHeight > this.style.height, "horizontal": this.scrollWidth > this.style.width};
}

像这样使用

if(document.getElementsByTagName("body")[0].hasScrollBars().vertical){
            alert("vertical");
}

        if(document.getElementsByTagName("body")[0].hasScrollBars().horizontal){
            alert("horizontal");
}