How to calculate the size of scroll bar thumb?

Question

I'm making my own custom UI system for my game in C# and XNA, and I have a small problem with scroll bars. I don't know what is the equation to calculate the thumb size of the scroll bar.

So let's say I have a panel that is 200x200 px. and an image that is 600x600 px. How can I calculate the scroll bar thumb size according to the image size?

Answer 1

The thumb (I've heard people call it a scrubber) size should be the size of the viewport (in your example 200px) divided by the size of the content (600px).

So, your thumb should take up 1/3rd the available height. The available height is the size of the scroll bar minus the arrows.

For example, if each arrow is 25px, then the thumb size would be calculated as so.

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

Of course you will have to make your own checks if the content height is smaller than the viewable area, if the content height is 0, etc.

Answer 2

Please find following Answer for your Question "how about calculating the content step of scrollbar, can you give me the formula?"

Formula for calculating the content step of scroller

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

If you jump down 1 pixel thumb then your content should scroll 2.666666666666667 pixel up.

Please do let me know if you would require more help.