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

Question

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

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

Answer 1

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

所以，你的拇指应该占可用高度的1/3。可用高度是滚动条的大小减去箭头。

例如，如果每个箭头为25像素，那么拇指大小将按原样计算。

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

请为您的问题找到以下答案＆＃34;如何计算滚动条的内容步骤，您能给我公式吗？＆＃34;

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

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像素。

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