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

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

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

滚动条内容步长计算公式

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

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