如何计算滚动条拇指大小？(How to calculate the size of scroll b

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

所以我们可以说我有一个面板为200×200像素。 以及图像是600×600像素。 我怎么能根据图像大小来计算滚动条拇指大小？

Answer 1:

拇指（我听说有人称它为一次洗涤器）大小应视口的大小（在您的示例200像素）的内容（600像素）的大小划分。

所以，你的拇指要占用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像素起来。

请不要让我知道如果你需要更多的帮助。

文章来源: How to calculate the size of scroll bar thumb?