0

I have a div that has an inline height set to be 100% height of the browser window:

element.style {
    height: 400px;
}
#scrollable-div {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    width: 270px;
}

With JS or jQuery, I want to determine whether that div currently has a scrollbar, and if so, hide/show a different div. Any thoughts?

Joel Eckroth
  • 2,514
  • 3
  • 20
  • 23

2 Answers2

0

You can use this function to know if the element has scrollbar:

$(document).ready(function() {
var mydiv = $('#scrollable-div');
console.log(mydiv1[0].scrollHeight);
console.log(mydiv1.height());
if (mydiv1[0].scrollHeight > mydiv1.height())​ {
    console.log(1);
    //Has scrollbar
}
    else {
        console.log(2);
    //Dont has scrollbar
    }
​});
MCSI
  • 2,818
  • 26
  • 35
0

I'd suggest having another div that contains the content and is within scrollable-div. This will help track the height of the content for you to perform logic on.

if ($('#scrollable-inner').height() > $('#scrollable-div').height())
    $('#dependent-div').hide();
else
    $('#dependent-div').show();

See full code & demo at this jsFiddle.

Goran Mottram
  • 6,244
  • 26
  • 41
  • When I try this, my values for both are always the same. My outer div has the inline height set, and the inner div has to be set to 100% to allow for scrolling...so they both end up the same. – Joel Eckroth Mar 26 '12 at 13:39
  • That's because you've explicitly set the inner div to match the height of it's parent. The point of the inner div is to track the height of the content only (and preferably nothing else), so leaving it to determine it's own height is key. Does it work if you remove `height:100%;` from the inner div? – Goran Mottram Mar 26 '12 at 14:48