Управление полосой прокрутки "div" с помощью JavaScript или JQuery

Question

Есть ли способ контролировать жизнь полосы прокрутки в зависимости от размера браузера и размера «div» одновременно в javascript или jquery.Например, если содержимое «div» переполнено, добавьте полосу прокрутки в div, а если размер браузера увеличен до высоты, удалите полосу прокрутки из div, поскольку она будет растянута браузером:

$("#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>

Это всего лишь начало, но я заблудился ... Я не очень хорошо использую clientHeight / scroll,смещение и т. д. Пожалуйста, помогите.

Answer 1

Вы можете сделать это с помощью css:

overflow-y: auto;