如果div具有滚动条，则使用Java隐藏/显示div

Question

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?

Answer 1

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
    }
​});

Answer 2

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 .