如何计算滚动条拇指的大小？

Question

我正在用 C# 和 XNA 为我的游戏制作自己的自定义 UI 系统，但滚动条有一个小问题。我不知道计算滚动条拇指大小的公式是什么。

假设我有一个 200x200 像素的面板。以及 600x600 像素的图像。如何根据图像大小计算滚动条拇指大小？

Answer 1

拇指（我听说人们称它为擦洗器）的大小应该是视口的大小（在您的示例中为 200 像素）除以内容的大小（600 像素）。

因此，您的拇指应该占据可用高度的 1/3。可用高度是滚动条的大小减去箭头。

例如，如果每个箭头是 25px，则拇指大小将按此计算。

var arrowHeight = 25;
var viewportHeight = 200;
var contentHeight = 600;

var viewableRatio = viewportHeight / contentHeight; // 1/3 or 0.333333333n

var scrollBarArea = viewportHeight - arrowHeight * 2; // 150px

var thumbHeight = scrollBarArea * viewableRatio; // 50px

当然你必须自己检查内容高度是否小于可视区域，内容高度是否为0等。

Answer 2

请找到以下问题的答案“如何计算滚动条的内容步长，你能给我公式吗？”

滚动条内容步长的计算公式

var scrollTrackSpace = self.contentHeight - self.viewportHeight; // (600 - 200) = 400 
var scrollThumbSpace =  self.viewportHeight - self.thumbHeight; // (200 - 50) = 150
var scrollJump = scrollTrackSpace / scrollThumbSpace; //  (400 / 150 ) = 2.666666666666667

如果您拇指向下跳了 1 个像素，那么您的内容应该向上滚动 2.666666666666667 像素。

如果您需要更多帮助，请告诉我。