scrollbar management of a 'div' with javascript or jquery

Question

Hi

Is there a way to control a scrollbar's life depending on the browser size and the 'div' size at the same time in javascript or jquery. For example, if the 'div' content is overflowing then add scrollbar to div and if the browser is resized to a higher height then remove scrollbar from div, since it's gonna be stretched with the browser:

$("#wrapper").height($(window).height() - 215);

var elem = document.getElementById("topPanel");
var errHolder = document.getElementById("error");

if(elem.scrollHeight > elem.clientHeight - errHolder.scrollHeight){
    $(elem).css({
                "overflow-y": "auto",
                "overflow-x": "hidden",
                height: elem.scrollHeight - errHolder.scrollHeight
                });
}

$(window).resize(function(e){
    if(this.clientHeight > 200){
        $(elem).css({
                    "overflow-y": "auto",
                    "overflow-x": "hidden",
                    height: "200px"
                    });
    }
    else {
        $(elem).css({
                "overflow-y": "auto",
                "overflow-x": "hidden",
                height: elem.scrollHeight - errHolder.scrollHeight
                });
    }
});

CSS:

#toolPanel {
position: relative;
width: 100%;
height: 100%;
}

#topPanel {
overflow: auto;
height: 315px;
width: 100%;
background: #069;
border: 1px solid #0CC;
}

#bottomPanel {
position: absolute;
background: #0CC;
border: 1px solid #069;
height: 65px;
width: 100%;
bottom: 0;
}

HTML:

<div id="wrapper">
  <div id="toolPanel">
    <div id="error"></div>
    <div id="topPanel">
        <!-- Content that may overflow -->
    </div>
    <div id="bottomPanel">&nbsp;</div>
  </div>
</div>

This is just a head-start but I'm lost... I'm not good with the use of clientHeight/scroll, offset, etc. Please help.

Answer 1

You can do that with css:

overflow-y: auto;