javascript - 具有流体高度的JS滚动条

Question

我想个性化具有流体高度的 div 的滚动条：

section {
max-height:70%;
overflow-y:auto;
}

我发现了两个智能灯片段：一个 Jquery 插件（http://baijs.nl/tinyscrollbar/）和一个纯 JS 插件（http://gondo.webdesigners.sk/javascript-scrollbar/）。问题是这些片段不接受高度的 % 值。例如，使用 tinyscrollbar，我必须输入：

section .viewport {
width: auto;
height:440px;
overflow: hidden;
position: relative;
}

如果我输入“身高：100%;” 或“height:auto;”，内容消失！为什么它接受 px 而不是 % ？我想明白它...

为了插入该部分的流体高度，我应该更改/添加 JS/JQuery 代码的哪一部分？

Answer 1

没有更多示例代码很难理解（请养成发布更多代码的习惯），但我认为这就是你所追求的。

--- 你为什么不跟踪上下文的高度（外部 div？）和内部 div（部分）的高度并在它们变化时计算它们？

var context_height = $("#context_div").height();
var section_height = $("section#id").height();

var percentage = section_height / context_height;
var measurement = percentage + "%";

$(section_height).css("height", measurement); // trigger this with a callback if heights need updating - possibly even re-initializing any scroll plugins, if necessary.