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

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

请让我知道你是否需要更多的帮助。