Geek asks and answers

How to calculate the size of a large scrollbar?

I am creating my own user interface for my game in C # and XNA, and I have a little problem with scrollbars. I don’t know what the equation is for calculating the thumb size of the scroll bar.

So, let's say I have a 200x200 pixel panel. and an image of 600x600 pixels. How to calculate thumb size of scrollbar according to image size?

enter image description here

+2
source share
2 answers

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

, 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 ..

+12

, " , ?"

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 .

, , .

+2

More articles:


All Articles