Detecting presence of a scroll bar in a DIV using jQuery? [duplicate]

This question already has answers here: How can I check if a scrollbar is visible? (21 answers) Closed 6 years ago. 开发者_如何学C

I want to detect the presence of a scroll bar in a DIV using jQuery. I was thinking to use $('div').scrollTop() but that returns 0 in both cases when the scroll bar is at the top and when there is no scroll bar at all.

Any ideas guys?

---

Assuming overflow on the div is auto:

var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;

---

// plugtrade.com - jQuery detect vertical scrollbar function //
(function($) {
    $.fn.has_scrollbar = function() {
        var divnode = this.get(0);
        if(divnode.scrollHeight > divnode.clientHeight)
            return true;
    }
})(jQuery);

example:

if($('#mydiv').has_scrollbar()) { /* do something */ } 

---

Well I ended up finding a solution by doing the following:

Wrap the content that grows with a DIV, then I detect if a (vertical) scroll bar is present by comparing the height of wrapperDiv with the height of containerDiv (which normally has the scroll bar if the content is too large).

If the height of wrapperDiv is bigger than the height of containerDiv then there is a scroll bar, if it is smaller, then there is no scroll bar.

<DIV id="containerDiv" style="width:100px;height:100px;overflow:auto;">
    <DIV id="wrapperDiv">
        .... content here...
    </DIV>
</DIV>

---

I will revise what bobince mentioned above since you are asking for jQuery

var div= $('#something');
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight;
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth;

This is because scrollHeight and scrollWidth are DOM properties.