根据隐藏内容的数量计算滚动条高度答案

【问题标题】：Calculate scrollbar height according to amount of hidden contents根据隐藏内容的数量计算滚动条高度
【发布时间】：2010-01-29 13:50:51
【问题描述】：

我正在创建一个图形滚动条，所以我需要手动计算滚动条的高度。您知道在大多数应用程序中，滚动条的高度是如何根据滚动量而变化的吗？

根据隐藏内容的数量计算滚动条高度的公式是什么？它是对数还是指数还是仅仅基于可见内容与隐藏内容的百分比？

这些是我的输入变量：

可见区域 - 例如。 100 像素
内容高度 - 例如。 1000 像素
最大滚动条高度 - 例如。 500 像素

这是我要计算的：

滚动条高度 - 例如。 50 像素？？

【问题讨论】：

标签： user-interface scrollbar formula

【解决方案1】：

通常是一个百分比。

例如如果可见区域是整个区域的 99%，则滚动条是高度的 99%。

同样，如果可见区域是整个区域的 50%，则滚动条是高度的 50%。

确保最小尺寸合理（例如至少 18-20 像素）

因此，如果您的可见高度为 500 像素，内容为 50,000 像素，即使它应该使拇指螺丝高度为 (500 像素的 1% = 5 像素)...使用默认最小值而是（例如 20 像素）

【讨论】：

如何以 %! 的形式关联运动？就像我将滚动条向下移动 5px 一样，我应该将 div 的顶部移动多少？！
通过执行与计算高度相同的三规则，反之亦然。

【解决方案2】：

我会使用 procent。因此，如果可见区域是内容高度的 45%。滚动条高度将是最大滚动条高度的 45%。这感觉一开始就对了。因此，如果您看到顶部的滚动条，您就会知道它的内容会增加一倍。

但我认为您需要对滚动条的最小尺寸设置一些下限，以便用户点击它。

【讨论】：

【解决方案3】：

我认为线性公式就可以了。假设最大滚动条高度与最大可见区域高度相同，伪代码如下：

scrollbar_visible=true;
if (content_height < visible_height) {scrollbar_visible = false; return;} // hide the scrollbar if there'se nothing to scroll
scrollbar_height = visible_height/content_height;
scrollbar_height = min(scrollbar_height, min_scrollbar_height); // don't let the scrollbar become smaller than some predefined size

【讨论】：