Geek asks and answers

Formula for scrollbar content step

Based on the illustration below:

enter image description here

Find the value content stepproportional to thumb heightand thumb step.

content step - the number of scrolling in a pixel in a vertical position.

What could be the formula here?

+3
source share
2 answers

Formula for calculating the height of the thumb

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

Formula for calculating the scroller content step

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

Finally: -

Height Thumb = 50px;

Thumb Step Down = 1px;

Content Scroll Up = 2.6666666666666666px;

If you jump 1 pixel, then your content should scroll 2.66666666666666667 pixels.

, , : -

+3

, VB.net, . . - 490 , - (ChAm), 50 40.

 Dim contentHeight As Integer = ChAm * 50 + 40
 Dim scrollBarArea As Integer = 490
 Dim viewableRatio As Double = scrollBarArea / contentHeight
 Dim thumbHeight As Double = scrollBarArea * viewableRatio
 Dim scrollTrackSpace As Integer = contentHeight - scrollBarArea
 Dim scrollThumbSpace As Double = scrollBarArea - thumbHeight
 Dim scrollJump As Double = scrollTrackSpace / scrollThumbSpace
0

More articles:


All Articles