'div' 的滚动条管理使用 JavaScript 或 jquery

Question

有没有办法在 javascript 或 jquery 中同时根据浏览器大小和“div”大小来控制滚动条的寿命。例如，如果“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>

This is just a head -开始，但我迷路了...我不擅长使用 clientHeight/scroll、offset 等。请帮忙。

Answer 1

你可以用 css 来做到这一点：

overflow-y: auto;