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

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

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

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

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

计算卷轴内容步骤的公式

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

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